當輸入中存在值時，警報為空 [React.js]

Question

我正在嘗試使用文本框值來提醒。 在下面的代碼中，它會提醒輸入中的任何值。

import { useState } from "react";

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

  function handle() {
    alert(value);
  }

  return (
    <div className="App">
      <h1>Hello App</h1>
      <input
        type="text"
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button onClick={handle}>Hello</button>
    </div>
  );
}

但是，如果已經從變量中設置了文本值，則不會在警報框中顯示該值。 它是空的。 正如您在下面的代碼中看到的那樣。 我正在用一個字符串設置一個 const hello 並將其設置為輸入的值。 但它沒有顯示在彈出窗口中。

import { useState } from "react";

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

  function handle() {
    alert(value);
  }
  return (
    <div className="App">
      <h1>Hello App</h1>
      <input
        type="text"
        onChange={(e) => {
          setValue(e.target.value);
        }}
        value={"hello"}
      />
      <button onClick={handle}>Hello</button>
    </div>
  );
}

Answer 1

警報未顯示“正確”狀態值的原因是因為在handle()上，該值沒有“按時”更改。

嘗試這個

import { useState, useCallback } from "react";

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

  const handle = useCallback(() => {
    alert(value);
  }, [value]);

  return (
    <div className="App">
      <h1>Hello App</h1>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button onClick={handle}>Hello</button>
    </div>
  );
}

為什么useCallback() ？

根據React 文檔。 這個鈎子會記住它的內部值，並且只會在任何依賴項發生變化時更新它們。

handle()函數作用域內的value不會更新，通過將handle函數包裝在useCallback鈎子中並將value狀態作為依賴項附加，您可以確保handle始終更新其內部作用域值/變量，希望對您有所幫助。