因此,当我尝试记录每次onChange
事件触发时的输入值时,它会产生1个怪异的事件延迟,因为“某些文本”将是输入的默认值,例如当我通过按退格键从“某些文本”中删除“ t” /删除它先记录“某些文本”而不是“某些文本”,然后当第二个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} />
</>
);
}
(击键)触发时,这就是我得到预期日志的时间(请参阅下图)。有什么我想念的东西吗,也许是我的理解上有差距?
因此,基本上发生的是,当您进行某些按键操作时,它只是首先记录任何默认值,然后以“ 1-event-callback-delayed”方式按了更多按键之后,便得到了预期的日志。奇怪吗?我如何摆脱延迟?帮助。
{{1}}
答案 0 :(得分:2)
控制台将值plt.show()
设置为状态
在没有e.target.value
的处理程序中没问题。
useCallback
const 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>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
更新:带有 <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
的演示
useCallback
const App = () => {
const [val, setVal] = React.useState('some text');
const handleOnchange = React.useCallback(e => {
console.log(e.target.value);
setVal(e.target.value);
}, [val]);
return (
<div className="App">
<input type='text' value={val} onChange={handleOnchange} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));