React中实现函数调用仅影响被点击的按钮（切换颜色）

嘿，作为React新手碰到这个问题太正常啦！咱们先理清楚问题根源：你现在用了一个全局的colorActive状态，所有按钮都绑定同一个状态值，所以一点击自然所有按钮都会跟着变。要实现仅点击的按钮变色，只需要调整状态的存储方式，让每个按钮有自己的激活状态就行，而且完全不用为每个按钮写单独函数～

具体步骤： #

1. 重构状态结构 #

把原来单一的布尔值状态，改成一个对象来记录每一天的激活状态，这样每个按钮都有自己的独立状态：

constructor(props) {
  super(props);
  this.state = {
    // 初始化所有天数为未激活状态
    activeDays: {
      Sunday: false,
      Monday: false,
      Tuesday: false,
      Wednesday: false,
      Thursday: false,
      Friday: false,
      Saturday: false
    }
  };
  this.toggleDayButton = this.toggleDayButton.bind(this);
}

2. 修改切换函数，接收按钮标识 #

让toggleDayButton函数接收被点击的日期名称，然后只更新对应日期的状态值：

toggleDayButton = (day) => {
  // 使用函数式更新state，确保拿到最新的状态值
  this.setState(prevState => ({
    activeDays: {
      // 先拷贝之前的所有状态，避免覆盖其他天数
      ...prevState.activeDays,
      // 切换当前点击天数的激活状态
      [day]: !prevState.activeDays[day]
    }
  }));
};

3. 绑定按钮与对应状态 #

每个按钮点击时传递自己的日期名称，并且根据activeDays里的对应值设置颜色：

<Button 
  onClick={() => this.toggleDayButton("Sunday")} 
  color={this.state.activeDays.Sunday ? "primary" : "default"}
>
  Sunday
</Button>
<Button 
  onClick={() => this.toggleDayButton("Monday")} 
  color={this.state.activeDays.Monday ? "primary" : "default"}
>
  Monday
</Button>
<!-- 剩下的Tuesday到Saturday按钮同理 -->

（可选）优化：循环渲染按钮 #

如果觉得重复写按钮代码太麻烦，可以把天数放到数组里循环渲染，代码更简洁：

render() {
  const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
  return (
    <div>
      {days.map(day => (
        <Button 
          key={day} // 必须加key，React列表渲染要求
          onClick={() => this.toggleDayButton(day)} 
          color={this.state.activeDays[day] ? "primary" : "default"}
        >
          {day}
        </Button>
      ))}
    </div>
  );
}

这样修改后，点击任意按钮就只会改变该按钮的颜色啦，而且全程只用了一个切换函数，完全符合你的需求～

内容的提问来源于stack exchange，提问作者LOTUSMS