因此,当我尝试记录每次onChange
事件触发时的输入值时,它会产生1个怪异的事件延迟,因为'some text'将是输入的默认值,例如,当我删除't从'一些文本'中,通过按退格键/删除键,它首先记录'一些文本'而不是'一些文本',然后当第二个onChange
(击键)触发时,这就是我得到预期日志的时间(请参见下图)。我是否缺少某些东西,也许我的理解力尚有差距?
所以基本上发生了什么,当您进行某些按键操作时,它只是首先记录任何默认值,然后以“ 1-event-callback-delayed”方式按了更多按键后,便得到了预期的日志。奇怪吗?我如何摆脱延迟?帮助。
const TestComponent = () => {
const [val, setVal] = React.useState('some text');
const handleOnchange = React.useCallback((event: TypeEvent) => {
setVal(event.target.value);
console.log(val);
}, [val]);
return (
<input type='text' value={val} onChange={handleOnchange} />
);
}
您不需要useCallback
来处理简单的输入
import React from "react";
import "./styles.css";
export default function App() {
const [val, setVal] = React.useState('some text');
const handleOnchange = e => {
console.log(e.target.value)
setVal(e.target.value)
}
return (
<div className="App">
<input type='text' value={val} onChange={handleOnchange} />
</div>
);
}