Formik 在更改输入时使用 debounce

Question

我有一个使用 use-debounce 中的 useDebouncedCallback 的简单示例。当我写入输入时，它保持不变，没有任何价值。我做错了什么？

const SignupForm = () => {

  const formik = useFormik({
    initialValues: {
      firstName: "",
    },

  });

  const debounced = useDebouncedCallback(
    // function
    (event) => {
      formik.handleChange(event);
    },
    // delay in ms
    1000
  );


  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
 
        onBlur={formik.handleBlur}
        onChange={(e) => {
          e.persist();
          debounced(e);
      
        }}
        value={formik.values.firstName}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

Answer 1

它不起作用，因为你有一个受控组件（由于 value={formik.values.firstName}）。

当调用 formik.handleChange 时（以去抖动的方式），e.target.value 为空，因为 React 使输入字段与保持空的 formik.values.firstName 同步（其初始值为 firstName: "").

要使其正常工作，您可以使用 formik setFieldValue 并将输入名称和值传递给去抖功能，如下所示：

const debounced = useDebouncedCallback(
  (field, value) => formik.setFieldValue(field, value),
  1000
);
...
<input
  id="firstName"
  name="firstName"
  type="text"
  onBlur={formik.handleBlur}
  onChange={(e) => {
    const { name, value } = e.target;
    debounced(name, value);
  }}
  value={formik.values.firstName}
/>

这是一个stackblitz example

Formik 在更改输入时使用 debounce

Formik use debounce on change input

reactjs

formik

debounce