javascript - ReactJS 在打字时延迟 onChange

Question

我需要更改状态以维护用户正在键入的字符串。但是我想延迟操作直到用户停止打字。但我不太清楚如何做到这两点。

因此，当用户停止输入时，我希望触发一个操作，但不是在此之前。有什么建议吗？

Answer 1

使用 React Hooks 和 Function 组件

要保留用户正在输入的字符串，请使用 useState Hook 来存储用户正在输入的文本。然后将该状态赋予输入值。另请务必在输入的 onChange 事件处理程序上使用 setState，否则输入值不会更改。

要仅在用户停止键入后的某个时间触发操作，您可以将 useEffect Hook 与 setTimeout 一起使用。在本例中，我们希望在输入值更改时触发 useEffect，因此我们将创建一个 useEffect Hook ，并在其依赖项数组上为其提供值为输入。提供给 useEffect 的函数应使用 setTimeout 在所需的延迟时间后触发操作。此外，为 useEffect 提供的函数应该返回一个清除超时设置的清理函数。这可以避免对不再与用户相关的输入值执行操作。

下面是一个应用程序的小示例，它使用上述步骤来保持用户正在键入的字符串可见，并在用户停止键入后 500 毫秒显示完成的字符串。

function App() {
  const [query, setQuery] = useState("");
  const [displayMessage, setDisplayMessage] = useState("");

  useEffect(() => {
    const timeOutId = setTimeout(() => setDisplayMessage(query), 500);
    return () => clearTimeout(timeOutId);
  }, [query]);

  return (
    <>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <p>{displayMessage}</p>
    </>
  );
}