如何在React中使用state实现点击按钮更改背景颜色？

你这个需求完全不需要用到useEffect，背景色不生效是代码写法错误导致的，具体问题有三处：

• 第一处是Button组件的style属性写法错误：你写的style={{ background: {bgClr} }}多套了一层大括号，相当于给background赋值了一个{bgClr: 'white'}格式的对象，而非合法的颜色字符串，正确写法应为style={{ background: bgClr }}
• 第二处是Button内部的div设置了固定背景色#f8f9fa，这个子元素完全覆盖了Button的显示区域，就算Button背景色修改成功也会被内层div挡住，看不到效果。如果你要改的是这个内层容器的背景色，直接把div的background值绑定为bgClr即可
• 第三点你在setBgClr之后打印bgClr拿到的是旧值属于正常现象，React的state更新是异步的，当前渲染周期内的state值是固定的，要等组件重新渲染后才能拿到更新后的bgClr，这个问题不影响实际功能

修改后的参考代码 #

state部分不用调整：

const [bgClr, setBgClr] = useState('white');

组件部分根据你要改的背景区域调整即可，示例是同时改按钮和内层div的背景色：

<Button
  onClick={AnnualHandler}
  variant="outline-light"
  style={{ background: bgClr }}>
  <div
    className="pt-3 pb-3 ml-3 mr-3"
    style={{ background: bgClr }}>
    <h4 style={{ color: 'var(--main)' }}>
      <b>$ 15</b>
    </h4>
  </div>
</Button>

点击事件处理函数不用做任何修改。

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