如何管理本地的组件的状态作出反应/终极版

Question

我在工作中发生反应，我使用终极版。我有点困惑。例如，我有两个按钮，每次点击它们时，我都希望颜色发生变化。

它工作的很好，但问题是：这两个按钮时，我就在其中单击有自己的颜色变化。

我不知道如何告诉反应/终极版只考虑该按钮之前点击。

有关如何解决这个任何想法？

谢谢。

Answer 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。

Answer 2

我建议你先从反应并没有终极版现在玩。有很好的课程https://egghead.io/courses/getting-started-with-redux你可以看。

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