提问人：kristalshards 提问时间：10/31/2022 最后编辑：kristalshards 更新时间：10/31/2022 访问量：47
如何在React的事件处理程序中获取最新的状态值？
How to get the latest state value in event handlers in React?
问：
请考虑此示例。假设我们有这个结构，我们想检查输入处理程序中的一些状态值。在本例中，我使用输入值进行检查，如果条件未通过，我们将设置错误。但是，当我输入 10 个字符时，输入不会立即触发 if 块，而是在下次键入时触发。我知道状态更改是异步的，这就是为什么我们主要使用 ，但在这种情况下，我不能将其用于事件处理程序。onChangeifuseEffect
因此，我想知道当您需要检查事件处理程序中的某些状态值并基于该值执行某些操作时，处理此类情况的最佳方法是什么。
import { useState } from "react";
export default function App() {
const [value, setValue] = useState("");
const [error, setError] = useState(false);
function onSubmit(event) {
event.preventDefault();
}
function onChange(event) {
if (value.length < 10) {
setValue(event.target.value);
} else {
setError(true);
}
}
return (
<form onSubmit={onSubmit}>
<input type="text" value={value} onChange={onChange} />
{error && <h2>Error triggered</h2>}
</form>
);
}
答：
0赞
Bimal Pariyar
10/31/2022
#1
我希望这能解决你的问题。
function onChange(event) {
if (event.target.value.length >= 10) {
setError(true);
} else {
setError(false);
}
setValue(event.target.value);
}
0赞
Karthik Sivasubramaniam
10/31/2022
#2
代码的问题在于，您正在检查状态值的长度，而不是输入字段所包含的当前值。
当用户键入第 10 个字符时，状态变量仍包含 9 个字符，因此即使返回的长度为 10，检查也会通过。valueifevent.target.value
更改您的功能，以便：
function onChange(event) {
const currentValue = event.target.value
if (currentValue.length < 10) {
setValue(currentValue);
} else {
setError(true);
}
}
这也解决了即使用户删除超过限制的字符也不会更新状态的问题（@Henry Woody 提到）。
评论
event.target.valuevaluevalue