如何在 React/Redux 中本地管理组件的状态答案

【问题标题】：How locally managing component's state in React/Redux如何在 React/Redux 中本地管理组件的状态
【发布时间】：2017-04-20 13:09:23
【问题描述】：

我正在做 react 并且我使用 redux。我有点困惑。例如，我有两个按钮，每次单击其中的一个时，我都希望它改变颜色。

效果很好，但问题是：当我单击其中一个按钮时，两个按钮的颜色都发生了变化。

我不知道如何告诉 react/redux 只考虑之前单击的按钮。

关于如何解决这个问题的任何想法？

谢谢。

【问题讨论】：

给我们看一些代码。你尝试了什么？

标签： reactjs redux

【解决方案1】：

首先，这不是提出好问题的方式。您需要向我们展示一些代码，您尝试了什么，问题出在哪里。

Check here how to ask good question.

解决您的问题的方法是将单击按钮的索引存储在本地状态中，然后检查内部渲染按钮是否与状态中的索引相同。

你可以这样做：

let buttons = ['Button 1', 'Button 2', "Button 3"]


class Test extends React.Component {
  constructor(){
    this.state = {
        active: null
    }
  }

  handleClick(i,event){
    this.setState({
        active: i
    })
  }

   render(){
    return (
        <div>
            {this.props.buttons.map((button, i) => {
               return (
                  <div key={i}><button className={this.state.active === i ? 'active' : ''} onClick={this.handleClick.bind(this, i)}>{button}</button></div>
               );
            })}
      </div>
    )
  }
}

React.render(<Test buttons={buttons}/>, document.getElementById('container'));

这里是fiddle。

【讨论】：

谢谢。你解决了我的问题。我认为 react 能够分别处理每个组件的状态。我期待像魔术道具或选项这样的东西，但现在我发现它应该手动完成。感谢您的帮助。

【解决方案2】：

我建议你现在开始使用 React 而不是 Redux。有很棒的课程https://egghead.io/courses/getting-started-with-redux你可以观看。

您的问题的答案是 - 您正在使用一个变量来检查两个按钮的状态。

【讨论】：