反復配列の各インデックスの状態を管理するにはどうすればいいですか？REACT

Question

私はReactの新機能ですが、一般的にはjavascriptにかなり精通しています。 Reactを始めるのに本当に苦労していましたが、次の3つのボタンでどのように状態を管理すべきか、誰かが私に説明できるかどうか疑問に思っていました。

MY主成分：

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 Buttonコンポーネント：

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} /> 
    ); 
    } 
}; 

は、どのように私は個々のボタンで状態を管理するのです！なぜこれを達成するのが難しいのですか？jQueryやAngularではこれを5行のコードで行うことができます！

「選択された」クラスを一度に1つのボタンにしか使用できないようにしようとしています - 選択されたボタンを個々のボタンで切り替えることはできますが、現在のすべてのボタンの状態を管理する方法はわかりませんselectButton（）クリックハンドラ。現在、私はクリックされたボタンの状態にアクセスすることができます...

ご協力いただければ幸いです！ありがとう。

Answer 1

すべての状態を親（メイン）コンポーネントから処理したいとします。メイン状態の各ボタンアイテムはisActiveを含む必要があり、メインコンポーネントでのみ変更する必要があります。子コンポーネントは「ダム」で、状態を知らず、状態を変更できないようにする必要があります。子コンポーネントに関数onChangeを呼び出すための関数を渡すと、そのコンポーネントは主コンポーネント内のその関数をトリガし、そこでその状態を変更できます。以下は、あなたが探していることをするための出発点です。

メインコンポーネント：

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> 
    ); 
    } 
}; 

Buttonコンポーネント：

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} /> 
    ); 
    } 
};