如何管理迭代数组 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 行代码完成！

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

如有任何帮助，我们将不胜感激！谢谢

Answer 1

您想处理来自父（主要）组件的所有状态。主状态中的每个 Button 项都应包含 isActive，并且只能在主组件中更改。子组件应该是 "dumb" 并且不知道状态或能够更改状态。如果您向子组件传递一个函数来调用 onChange 作为 prop，它可以在主组件中触发该函数并更改那里的状态。在下面找到一个起点，以便完成您正在寻找的事情。

主要成分：

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

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

How do I manage the state of each index in an iterated over array REACT

javascript

frontend

reactjs

react-native