React中如何单独修改单个数字按钮的颜色而不影响其他按钮

问题原因 #

你所有按钮共用了同一个全局状态numbersColor，所有按钮的背景色都绑定了这个状态，只要状态更新，所有按钮的样式都会同步变更，自然无法实现单个按钮的样式修改。

解决方案 #

根据你的业务需求可以选择以下两种常用实现：

方案1：单选互斥效果（同一时间最多一个按钮为红色） #

将状态改为存储当前被激活按钮的唯一标识（你这里用num作为唯一key即可），渲染时判断当前按钮的num是否等于激活标识，对应匹配颜色。
完整代码示例：

// 存储当前激活的num，初始为null无激活
const [activeNum, setActiveNum] = useState(null);

function changeButtonColor(num) {
  // 点击相同按钮取消激活，点击不同按钮切换激活项
  setActiveNum(activeNum === num ? null : num);
}

return (
      <NumbersContainer>
        {numbersList.map((num) => (
          <Numbers
            key={num}
            style={{ backgroundColor: activeNum === num ? 'red' : 'green' }}
            onClick={() => changeButtonColor(num)}
          >
            {formatNumber(num)}
          </Numbers>
        ))}
      </NumbersContainer>
)

方案2：多按钮独立切换（每个按钮可单独控制颜色，互不影响） #

用对象存储每个num对应的颜色状态，点击时只修改对应num的颜色值。
完整代码示例：

// 存储每个num对应的颜色，key为num，value为对应颜色
const [colorsMap, setColorsMap] = useState({});

function changeButtonColor(num) {
  setColorsMap(prev => ({
    ...prev,
    // 未设置过默认是绿色，点击切换
    [num]: prev[num] === 'green' || !prev[num] ? 'red' : 'green'
  }))
}

return (
      <NumbersContainer>
        {numbersList.map((num) => (
          <Numbers
            key={num}
            style={{ backgroundColor: colorsMap[num] || 'green' }}
            onClick={() => changeButtonColor(num)}
          >
            {formatNumber(num)}
          </Numbers>
        ))}
      </NumbersContainer>
)

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