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

我有几个按钮充当开关。我有一个在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>  

this.toggleDayButton（e）}
颜色={this.state.colorActive？“主”：“默认值”}>
星期日
this.toggleDayButton（e）}
颜色={this.state.colorActive？“主”：“默认值”}>
星期一
...
... 
this.toggleDayButton（e）}
颜色={this.state.colorActive？“主”：“默认值”}>
星期六

我知道这非常简单（从jQuery中的简单程度判断），React应该比jQuery灵活一百万倍。帮帮我，伙计们。（如您所知，这是一种新的反应）

---

提前感谢

发布按钮组件和按钮组件的完整代码。看起来是这样的。无论单击哪个按钮，toggleDayButton都是相同的。您可能需要向toggleDayButton传递一个Id，以确定要修改哪个按钮的状态。我是在发布后才看到这条评论的。