时间戳

首页 > 解决方案 > 如何等待 onChange 事件使用反应钩子设置值？

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

问题描述

我想访问函数value内部状态变量的值handleKeyDown。但是，当我继续打字时，我注意到它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设置值 usingsetValue和 use valuein handleKeyDown？

标签： javascriptreactjsreact-hooksuse-state

解决方案

您可以使用 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>
  );
}

`

推荐阅读