如何使用状态更改按钮单击反应中的颜色
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
我已经设置状态来改变我的背景颜色
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