输入onChange如何与状态反应?

时间:2020-03-28 11:26:12

标签: reactjs typescript react-hooks

因此,当我尝试记录每次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}}

enter image description here

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"));