![](/img/trans.png)
[英]How to manipulate the DOM inside of map function using onChange event on one of the checkboxes with react hooks
[英]How to wait for onChange event to set Value using react hooks?
我想访问handleKeyDown
函数内的value
状态变量的value
。 但是,当我继续输入时,我注意到value
没有设置为最新的输入值,而是设置为以前的输入状态。 我使用setTimeout
以便先调用handleChange
,然后setValue()
函数会更改 value 的value
。 然后更改的值将反映在handleKeyDown
函数中。
import "./styles.css";
import { useState } from "react";
export default function App() {
const [value, setValue] = useState("");
const handleChange = (e) => {
console.log("called handle changed");
setValue(e.target.value);
};
const handleKeyDown = (e) => {
console.log("called keydown");
console.log(value);
};
return (
<div className="App">
<input
value={value}
onChange={handleChange}
onKeyDown={(e) => setTimeout(() => handleKeyDown(e), 0)}
/>
</div>
);
}
e.target.value
显示最新和所需的值,但value
本身显示旧值。 如何等到handleChange
使用setValue
设置值并使用handleKeyDown
value
?
您可以对当前值使用 useRef 钩子
`
import "./styles.css";
import { useState, useRef } from "react";
export default function App() {
const [value, setValue] = useState("");
const updatedValue = useRef("");
const handleChange = (e) => {
console.log("called handle changed");
setValue(e.target.value);
updatedValue.current = e.target.value;
};
const handleKeyDown = (e) => {
console.log("called keydown");
console.log(updatedValue.current);
};
return (
<div className="App">
<input
value={value}
onChange={handleChange}
onKeyDown={(e) => setTimeout(() => handleKeyDown(e), 0)}
/>
</div>
);
}
`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.