Yinelenen bir dizi içinde her dizinin durumunu nasıl yönetirim REACT

Question

React için çok yeni ama genel olarak javascript ile oldukça tanıdık yeni. React ile başlamak için gerçekten zor bir zaman geçirdim ve birisinin şu üç düğmede durumu nasıl yönetmem gerektiğini bana açıklayabileceğini merak ediyordum.

MY ANA PARÇA:

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
var classNames = require('classnames'); 
import classnames from 'classnames'; 
import Fans from './Buttons' 

export default class Main extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     Buttons:[ 
     { src: '/src/images/1.svg', 
      button: 1 
     }, 
     { src: '/src/images/2.svg', 
      button: 2 
     }, 
     { 
      src: '/src/images/3.svg', 
      button: 3 
     } 
     ] 
    } 
    } 

    render() { 
    var buttons = this.state.Buttons.map(function(button){ 
     return(<Buttons key={button.button} 
       buttNum={button.button} 
       src={button.src} 
       />); 
    }) 

    return (
     <div> 
     {buttons} 
     </div> 
    ); 
    } 
}; 

MY DÜĞME PARÇA:

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import classnames from 'classnames'; 
var classNames = require('classnames'); 

export default class Buttons extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isActive: false} 
    this.selectButton = this.selectButton.bind(this) 
    } 

    selectButton() { 
    let active = !this.state.isActive; 
    this.setState({isActive: active}) 
    } 

    render() { 
    let classes = classnames('btn-success', {selected: this.state.isActive}); 
    return (
     <img src={this.props.src} 
     buttNum={this.props.key} 
     onClick={this.selectButton} 
     className={classes} /> 
    ); 
    } 
}; 

NASIL BİREYSEL DÜĞMELER ON durumunu yönetmek DO ?! Bunu neden bu kadar zor ki ... jQuery veya Açısal ile bu 5 satır kod ile yapılabilir!

Sadece 'seçili' sınıfı tek seferde tek bir düğmede kullanılabilir hale getirmeye çalışıyorum - bunun yerine tek tek düğmelerde seçilebilir ancak tüm düğmelerin durumunu akımımla nasıl yönetebileceğimi bilmiyorum selectButton() tıklatma işleyicisi. Şu anda sadece tıklanan düğmenin durumuna erişebiliyorum ...

Herhangi bir yardım büyük bir memnuniyetle karşılanacaktır! Teşekkürler.

Answer 1

Tüm durumları ana (ana) bileşenden almak istersiniz. Ana durumdaki her bir Düğme öğesi, isActive'u içermeli ve yalnızca ana bileşende değiştirilmelidir. Çocuk bileşenleri “dilsiz” olmalı ve devleti tanımamalı ya da devleti değiştirebilmelidir. Alt bileşeni onChange'u destekleyici olarak çağırmak için bir işlevi iletirseniz, ana bileşendeki bu işlevi tetikleyebilir ve durumu o konumda değiştirebilir. Aradığınızı yapmak için aşağıda bir başlangıç ​​noktası bulun.

Ana bileşen:

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
var classNames = require('classnames'); 
import classnames from 'classnames'; 
import Fans from './Buttons' 

export default class Main extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     Buttons:[ 
     { src: '/src/images/1.svg', 
      button: 1, 
      isActive: false 
     }, 
     { src: '/src/images/2.svg', 
      button: 2, 
      isActive: false 
     }, 
     { 
      src: '/src/images/3.svg', 
      button: 3, 
      isActive: fasle 
     } 
     ] 
    } 
    } 

    changeActive(index) { 
    var buttonArray = this.state.Buttons; 
    for (var i = 0; i < Buttons.length; i++) { 
     let active = !buttonArray[i].isActive; 
     if (index - 1 === index) { 
     buttonArray[i].isActive = active; 
     } else { 
     buttonArray[i].isActive = false; 
     } 
    } 
    this.setState({Buttons : buttonArray}); 
    } 

    render() { 
    var buttons = this.state.Buttons.map(function(button){ 
     return(<Buttons key={button.button} 
       buttNum={button.button} 
       src={button.src}, 
       changeActive={this.changeActive} 
       />); 
    }) 

    return (
     <div> 
     {buttons} 
     </div> 
    ); 
    } 
}; 

Düğme bileşeni:

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import classnames from 'classnames'; 
var classNames = require('classnames'); 

export default class Buttons extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isActive: false} 
    this.selectButton = this.selectButton.bind(this) 
    } 

    selectButton() { 
    this.props.changeActive(this.props.buttNum); 
    } 

    render() { 
    let classes = classnames('btn-success', {selected: this.state.isActive}); 
    return (
     <img src={this.props.src} 
     buttNum={this.props.key} 
     onClick={this.selectButton} 
     className={classes} /> 
    ); 
    } 
};