如何使用状态更改按钮单击反应中的颜色

How to change color in react on button click using state

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

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吗?

您需要在分配对象时分配bgClr的实际值:

style={{ backgroundColor: bgClr }}>

您所做的一切都是正确的,但只有 css 属性 background

style={{ background: bgClr }}

正确的做法是

style={{ backgroundColor: bgClr }}>

可以这样做:

// import React from "react";

const App = () => {
  const [bgClr, setBgClr] = React.useState("white");

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

  return (
    <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>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

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

不要那样做。直接给按钮设置 bgClr 就可以了。

<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