[英]React useState hook isn't updating state as desired
I'm trying to change the background color of a button to black as mouse hover over it and change it back to white when it's not.我正在尝试将按钮的背景颜色更改为黑色,因为鼠标 hover 在它上面并在它不是时将其更改回白色。 I used the state on a string which will change to black or white and pass it in style property.我在一个字符串上使用了 state ,该字符串将变为黑色或白色,并将其传递给 style 属性。 Any idea on where I'm going wrong?知道我要去哪里错了吗?
Thank you.谢谢你。
import React, { useState } from "react";
function App() {
const [headingText, setHeadingText] = useState("Hello");
const [buttonColor, setButtonColor] = useState("White"); //setting the state
function handleClick() {
setHeadingText("Submitted");
}
function mouseOver() {
setButtonColor("Black"); //changing state
}
function mouseOut() {
setButtonColor("White"); //changing state
}
return (
<div className="container">
<h1>{headingText}</h1>
<input type="text" placeholder="What's your name?" />
<button
style={{ backgroundColor: { buttonColor } }} //where I want it to apply
onClick={handleClick}
onMouseOver={mouseOver}
onMouseOut={mouseOut}
>
Submit
</button>
</div>
);
}
You should use instead onMouseEnter
and onMouseLeave
events.您应该改用onMouseEnter
和onMouseLeave
事件。
Try as the following:尝试如下:
<button style={{ backgroundColor: buttonColor }}
onClick={handleClick}
onMouseEnter={mouseOver}
onMouseLeave={mouseOut} >
Read further here in React documentation for Mouse Events .进一步阅读鼠标事件的 React 文档。
I hope this helps!我希望这有帮助!
import React, { useState } from "react";导入反应,{ useState } 从“反应”;
import { debounce } from 'lodash';
function App() {
const [headingText, setHeadingText] = useState("Hello");
const [buttonColor, setButtonColor] = useState("White"); //setting the state
function handleClick() {
setHeadingText("Submitted");
}
function mouseOver() {
setButtonColor("Black"); //changing state
}
function mouseOut() {
setButtonColor("White"); //changing state
}
return (
<div className="container">
<h1>{headingText}</h1>
<input type="text" placeholder="What's your name?" />
<button
style={{ backgroundColor: { buttonColor } }} //where I want it to apply
onClick={handleClick}
onMouseOver={debounce(mouseOver, 200)}
onMouseOut={debounce(mouseOut, 200)}
>
Submit
</button>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.