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

Posted 2023-02-22

【中文标题】如何在 React/Redux 中本地管理组件的状态

【英文标题】：How locally managing component's state in React/Redux

【发布时间】：2017-04-20 13:09:23

【问题描述】：

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

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

我不知道如何告诉 react/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你可以观看。

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