如何管理迭代数组 REACT 中每个索引的状态

Question

我对 React 非常陌生，但对 JavaScript 非常熟悉。开始使用 React 真的很艰难，想知道是否有人可以向我解释我应该如何管理以下三个按钮的状态。

我的主要组成部分：

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

我的按钮组件：

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 行代码即可完成！

我只是想使“选定”类一次只能用于一个按钮 - 而是可以在单个按钮上切换选定的，但我不知道如何使用当前的 selectButton 管理所有按钮的状态() 点击处理程序。目前我只能访问被点击按钮的状态...

任何帮助将不胜感激！谢谢。

Answer 1

您想要处理来自父（主）组件的所有状态。主状态中的每个 Button 项都应包含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>
    );
  }
};

按钮组件：

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