reactjs - 仅在 onChange 停止触发设定时间后，如何使 React 输入 onChange 设置状态？

Question

简介我在 create-react-app 应用程序中有一个用户输入元素。它允许用户键入数字，或使用箭头向上或向下递增数字。然后输出显示该数字。

问题用户想要达到某个数字，无论他们如何输入数字，都会有虚假的中间值触发 onChange 事件监听器。如果用户尝试用键盘输入“15”，则输出首先是“1”，然后是“15”，但我希望它只是“15”。我不想使用按钮/提交/等或其他事件。如果用户按住从 0 到 500 的向上箭头，我想在“快速变化”的输入减慢/停止后直接更新到 500。

目标我想编写一个 onChange 函数，以便仅当 onChange 自上次事件以来至少 600 毫秒内未触发事件时才会更新输出。

详细信息如果用户键入“1”，然后键入“5”(表示“15”)，间隔时间小于 600 毫秒，则输出应更新为“15”，并跳过“1”。但是，如果用户输入“1”和“5”之间的时间超过 600 毫秒，则输出应首先是“1”，然后是“5”。同样，如果用户非常快速地上下按下增量箭头，则输出不应更新，直到它们停止或减慢为止。

在终端中，使用 create-react-app 制作一个 React 应用

create-react-app delay-output-app

代码将其复制并粘贴到delay-output-app/src/App.js中，替换所有以前的代码。

import React, { useState, useEffect, useRef } from "react";
import "./App.css";

function App() {
  const inputRef = useRef();
  const [userValue, setUserValue] = useState(0);
  const [output, setOutput] = useState(0);

  const updateOutput = () => {
    setUserValue(inputRef.current.value);
    setOutput(inputRef.current.value);
    //if input is changing quickly - do not update output
    //only update output if input has not changed for 700ms since last change.
  };

  return (
    <div className="App">
      <br></br>
      <div>
        <h1>Input</h1>
        <input
          ref={inputRef}
          value={userValue}
          type="number"
          onChange={updateOutput}
        ></input>
      </div>
      <br></br>
      <div>
        <h1>Output</h1>
        {output}
      </div>
    </div>
  );
}

export default App;

在终端中运行应用程序...

cd delay-output-app
npm start

我尝试过使用 setTimeout 和 setInterval，但我不断遇到问题，特别是与 React useEffect Hook 结合使用时。再次强调，我不想使用按钮，也不想让用户除了输入数字或单击箭头来更新输出之外还需要按任何操作。仅输入值之间的时间决定输入值何时处于中间值或何时应更新输出。

更新以包含去抖 - 我的印象是，在输入事件结束之前，去抖不应运行，但在等待期后我仍然会收到更新输出，无论如何如果用户输入事件结束。

带有 lodash debounce 的代码

import React, { useState, useRef } from "react";
import "./App.css";
import _ from "lodash";

function App() {
  const inputRef = useRef();
  const [userValue, setUserValue] = useState(0);
  const [output, setOutput] = useState(0);

  const updateOutput = _.debounce(
    () => setOutput(inputRef.current.value),
    700
  );
  //if input is changing quickly - do not update output
  //only update output if input has not changed for 700ms since last change.

  const updateUserValue = () => {
    setUserValue(inputRef.current.value);
  };
  return (
    <div className="App">
      <br></br>
      <div>
        <h1>Input</h1>
        <input
          ref={inputRef}
          value={userValue}
          type="number"
          onChange={() => {
            updateOutput();
            updateUserValue();
          }}
        ></input>
      </div>
      <br></br>
      <div>
        <h1>Output</h1>
        {output}
      </div>
    </div>
  );
}

export default App;

Answer 1

你真的不需要裁判来解决这个问题。调用 useEffect 就足够了:

useEffect(() => {
  const timeout = setTimeout(() => {
    setOutput(userValue);
  }, 600);
  return () => {
    clearTimeout(timeout);
  };
}, [userValue]);

const updateOutput = (e) => {
  setUserValue(e.target.value);
};