Question

我正在做反应，我使用redux。我有点困惑。例如，我有两个按钮，每次我点击它们我想要它的颜色变化。

它工作得很好，但问题是：当我点击其中一个按钮时，两个按钮的颜色都会改变。

我不知道如何判断反应/ redux只考虑之前点击的按钮。

有关如何解决此问题的想法吗？

感谢。

Answer 1

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

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

Answer 2

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

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 / Redux中本地管理组件的状态

2 个答案: