input onChange在react，with state中是如何工作的？
提问于 2020-03-28 11:26:13
因此，当我尝试记录每个onChange事件触发的输入值时，它会给出一个奇怪的1事件延迟，因为“一些文本”将是输入的默认值，比如当我通过按backspace/delete从“一些文本”中删除“t”时，首先记录“一些文本”而不是“一些tex”，然后当第二个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} />
</>
);
}
回答 1
Stack Overflow用户
发布于 2020-03-28 11:30:01
控制被设置为状态的值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")); <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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60900517
复制相关文章
点击加载更多
腾讯云开发者
