在自定义 React 挂钩中使用 debounce 来更改输入

Question

我有一个自定义挂钩 useForm，它存储表单值并验证输入值。

const { errors, handleChange, values } = useForm();

handleChange 对每次输入更改进行验证。是否可以在自定义挂钩中使用 debouce？如果是，怎么做？

const handleChange = (ev) => {
  ev.persist();

  // set value in values state
  const currentError = validate(/* pass params */)
  // update errors state
};

Answer 1

我认为你可以通过将函数包装在 debounce 中来解决这个问题


const doValidation = (ev) => {
  ev.persist();

  // set value in values state
  const currentError = validate(/* pass params */)
  // update errors state
};

const handleChange = debounce(doValidation,100)

有了这个，你的验证应该每 100 毫秒只调用一次。

Answer 2

您可以使用 lodash/underscore 等库中的 debounce 或编写自己的去抖功能。 Post 您需要去抖动 handleChange 函数并使用 useCallback 这样您就不会在每个渲染器上创建新的去抖动函数

const handleChange = useCallback(_.debounce((ev) => {
  ev.persist();

  // set value in values state
  const currentError = validate(/* pass params */)
  // update errors state
}, 500), []);

另外，当您使用 useCallback 并确保函数仅在最初创建时。最好不要依赖封闭词法范围内的变量。

Answer 3

您也可以在 onBlur 而不是 onChange 上验证值。验证将触发一次，您不需要对其进行去抖动。

在自定义 React 挂钩中使用 debounce 来更改输入

Use debounce inside a custom React hook for input change

reactjs

forms

validation

react-hooks

debounce