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

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

本文关键字：索引 状态 REACT 数组 何管理 管理 迭代      更新时间：2023-09-26

我对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"类一次只对一个按钮可用——相反，selected可以在单个按钮上切换，但我不知道如何使用我当前的selectButton（）单击处理程序来管理所有按钮的状态。目前我只能访问被点击的按钮的状态。。。

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

您希望处理父（主）组件的所有状态。主状态中的每个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} />
    );
  }
};
相关文章：