Question

我有几个按钮用作切换。我有一个功能，可以在UI上创建切换颜色更改。（现在最终会有更多功能），我只需要将颜色更改发生在被点击的按钮而不是所有使用该功能的按钮上。除了为每个按钮创建一个函数之外，还有一种更好的方法。

*现在，尽管该功能有效，但它会改变所有按钮的颜色，无论我点击哪一个。我试图仅在点击按钮时启动该功能。

实施例

构造函数中的状态

constructor(props) {
   super(props);
   this.state = { 
       colorActive: "true", 
   };
   this.toggleDayButton = this.toggleDayButton.bind(this);
}

功能

toggleDayButton = () => {
   this.setState({ colorActive: !this.state.colorActive });
};

按钮

<Button 
    onClick={(e) => this.toggleDayButton(e)} 
    color={this.state.colorActive ? "primary" : "default"}>
    Sunday
</Button>  
<Button
    onClick={(e) => this.toggleDayButton(e)}
    color={this.state.colorActive ? "primary" : "default"}>
    Monday
</Button>  
...
... 
<Button
    onClick={(e) => this.toggleDayButton(e)}
    color={this.state.colorActive ? "primary" : "default"}>
    Saturday
</Button>

我知道这非常简单（根据jQuery的容易程度来判断）和React的灵活性要高出一百万倍。帮助我这里的伙计们。（新的反应，你可以告诉）

提前致谢

在React中进行函数调用仅影响单击的项目

0 个答案: