输入onChange如何以状态反应?

问题描述 投票:0回答:1

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

enter image description here

reactjs react-hooks
1个回答
0
投票

您不需要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>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.