Formik 在更改输入时使用 debounce
Formik use debounce on change input
我有一个使用 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>
);
};
它不起作用,因为你有一个受控组件(由于 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}
/>
我有一个使用 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>
);
};
它不起作用,因为你有一个受控组件(由于 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}
/>