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

MY BUTTON COMPONENT：

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

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

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

Answer 1

您想要处理父（主）组件中的所有状态。主状态中的每个Button项应包含isActive，并且只应在主要组件中更改。儿童成分应该是“愚蠢的”＃34;而不知道国家或能够改变国家。如果传递子组件一个函数来调用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中管理每个索引的状态

1 个答案: