如何使用反應鈎子等待 onChange 事件設置值？

Question

我想訪問handleKeyDown函數內的value狀態變量的value 。 但是，當我繼續輸入時，我注意到value沒有設置為最新的輸入值，而是設置為以前的輸入狀態。 我使用setTimeout以便先調用handleChange ，然后setValue()函數會更改 value 的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 ？

Answer 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>
  );
}

`