如何等待onChange事件设置值使用react钩子?

Question

我想访问handleKeyDown函数中value状态变量的值。但是，当我继续打字时，我注意到value没有设置为最新的输入值，而是设置为以前的输入状态。我使用setTimeout，这样handleChange将首先被调用，setValue()函数将改变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?

Answer 1

可以使用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>
);
}