如何等待 onChange 事件使用反应钩子设置值？答案

【问题标题】：How to wait for onChange event to set Value using react hooks?如何等待 onChange 事件使用反应钩子设置值？
【发布时间】：2021-10-27 07:19:37
【问题描述】：

我想在handleKeyDown 函数中访问value 状态变量的值。但是，当我继续打字时，我注意到value 没有设置为最新的输入值，而是设置为之前的输入状态。我使用了 setTimeout 以便首先调用 handleChange 并且 setValue() 函数将更改 value 的值。然后更改的值将反映在 handleKeyDown 函数中。

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    console.log("called handle changed");
    setValue(e.target.value);
  };

  const handleKeyDown = (e) => {
    console.log("called keydown");
    console.log(value);
  };

  return (
    <div className="App">
      <input
        value={value}
        onChange={handleChange}
        onKeyDown={(e) => setTimeout(() => handleKeyDown(e), 0)}
      />
    </div>
  );
}

e.target.value 显示最新和必需的值，但 value 本身显示旧值。如何等到handleChange 使用setValue 设置值并在handleKeyDown 中使用value？

【问题讨论】：

React 状态更新是异步处理的，你不能等待它们。为什么handleKeyDown 也不能使用e.target.value？您要解决的用例/问题是什么？顺便说一句，使用setTimeout 不起作用，因为handleKeyDown 的版本是在回调范围内关闭未更新value 状态的版本，因此即使超时为10 分钟，它仍会记录过时的状态值.

标签： javascript reactjs react-hooks use-state

【解决方案1】：

你可以使用 useRef 钩子获取当前值

import "./styles.css";
import { useState, useRef } from "react";

export default function App() {
  const [value, setValue] = useState("");
  const updatedValue = useRef("");

  const handleChange = (e) => {
    console.log("called handle changed");
    setValue(e.target.value);
    updatedValue.current = e.target.value;
  };

  const handleKeyDown = (e) => {
    console.log("called keydown");
    console.log(updatedValue.current);
  };

  return (
    <div className="App">
      <input
        value={value}
        onChange={handleChange}
        onKeyDown={(e) => setTimeout(() => handleKeyDown(e), 0)}
      />
    </div>
  );
}

【讨论】：