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

Question

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

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

目标 我想编写一个 onChange 函数，以便仅当 onChange not 自上次事件以来触发事件至少 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 挂钩时。同样，我不想使用按钮或让用户除了输入数字或单击箭头来更新输出之外需要按下任何东西。只有输入值之间的时间决定了输入值何时是中间值或应该更新输出。

更新以包括去抖 - 我的印象是去抖不应该在输入事件结束之前运行，但我仍然在等待期之后获得更新输出，不管如果用户输入事件结束。

带有 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

你可以试试这个方法

const updateOutput = () => {
setUserValue(inputRef.current.value);
setTimeout(() => {setOutput(inputRef.current.value)}, 700) }

希望这会对你有所帮助。

Answer 2

这应该可以解决问题。您需要使用 ref 来在重绘之间保持去抖动功能：

const { useCallback, useState, useRef } = React;
const { render } = ReactDOM;
const { debounce } = _;

function App() {
  const [userValue, setUserValue] = useState(0);
  const [output, setOutput] = useState(0);
  const debounced = useRef(debounce((value) => setOutput(value), 600))

  const updateUserValue = useCallback(({ target: { value }}) => {
    setUserValue(value);
    debounced.current(value)
  }, []);

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

render(<App />, document.body);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

Answer 3

你真的不需要 ref 来解决这个问题。拨打useEffect 就足够了：

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

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