时间戳

首页 > 解决方案 > 如何使用状态更改对按钮单击做出反应的颜色

reactjs - 如何使用状态更改对按钮单击做出反应的颜色

问题描述

我已经设置状态来改变我的背景颜色

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

需要更改背景颜色的按钮是

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

处理程序是

const AnnualHandler = () => {
    setBgClr('yellow');
    console.log(bgClr);
  };

但是在点击时，背景颜色没有改变。这里应该使用 useEffect 吗？

标签： reactjsuse-effectuse-state

解决方案

代码中的主要问题是将bgClr值设置为按钮背景的方式。

<Button style={{ background: {bgClr} }}>

不要那样做。像这样直接设置bgClr为Button即可。

<Button style={{ background: bgClr }}>

笔记 ：-

const AnnualHandler = () => {
   setBgClr('yellow');
   console.log(bgClr);
};

上面的代码片段向我们展示了您正在尝试在setBgClr运行后获取更新的状态。但它不会发生，因为 React 中的状态更新是异步的。这样即使将颜色更改为 ，您也将获得旧值yellow。

资源 - https://reactjs.org/docs/state-and-lifecycle.html

完整代码

import { useState } from "react";

export default function App() {
  const [bgClr, setBgClr] = useState("white");

  const AnnualHandler = () => {
    setBgClr("yellow");
  };

  return (
    <button onClick={AnnualHandler} style={{ background: bgClr }}>
      Change
    </button>
  );
}

Codesandbox - https://codesandbox.io/s/change-the-color-of-the-button-69327076-wpgyj?file=/src/App.js

推荐阅读