[英]How to wait for onChange event to set Value using react hooks?
I want to access the value of value
state variable inside handleKeyDown
function.我想访问
handleKeyDown
函数内的value
状态变量的value
。 But, as I go on typing I notice that value
is not set to the latest input value but the previous input state instead.但是,当我继续输入时,我注意到
value
没有设置为最新的输入值,而是设置为以前的输入状态。 I used setTimeout
so that handleChange
would be called first and setValue()
function would change the value of value
.我使用
setTimeout
以便先调用handleChange
,然后setValue()
函数会更改 value 的value
。 And then changed value would be reflected inside handleKeyDown
function.然后更改的值将反映在
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
shows the latest and required value, but value
itself shows the old value. e.target.value
显示最新和所需的值,但value
本身显示旧值。 How to wait until handleChange
sets the value using setValue
and use value
in handleKeyDown
?如何等到
handleChange
使用setValue
设置值并使用handleKeyDown
value
?
You can use the useRef hook for the current 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.