如何在react-hook-form中监听表单重置事件？

Question

我在 React 项目中使用

react-hook-form

，并且我需要在重置表单时执行一些操作。 但是，我找不到监听表单重置事件的方法，并且由于我在子项中，所以我无法直接访问 reset 按钮 事件。

在这种情况下，我想重置不在要提交的值中的检查状态 这是我的表单设置的简化版本：

import { useState } from 'react';
import { FormProvider, useForm, useFormContext } from 'react-hook-form';

const initialValues = { firstName: "empty", lastName: "empty" };
function MyForm() {
    const methods = useForm({ defaultValues: { ...initialValues } });

    const onSubmit = data => {
        console.log(data);
    };

    return (
        <FormProvider {...methods}>
            <CustomContent />
            <button type="button" onClick={methods.handleSubmit(onSubmit)}>Submit</button>
            <button type="button" onClick={() => methods.reset({ ...initialValues })}>Reset</button>
        </FormProvider >
    );
}

function CustomContent() {
    const { register } = useFormContext();

    const [isChecked, setIsChecked] = useState(false);

    return (
        <div>
            <input {...register('firstName')} placeholder="First Name" />

            <input {...register('lastName')} placeholder="Last Name" />

            <label >
                <input type="checkbox" checked={isChecked} onChange={() => setIsChecked((prev) => !prev)} />

                <span>Check me</span>
            </label>
        </div>
    );
}

export default MyForm;

react-hook-form 中是否有事件、回调或钩子允许我专门监听表单重置操作，以便我可以执行其他任务（例如重置其他状态或触发副作用或更改未保存在表单中的字段）形式）？

我尝试了这里提出的解决方案

有没有办法监听表单重置？ - 反应钩子形式。

useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false;
            return;
        }
        if (!isSubmitted && !isDirty) {
            setIsChecked(false);
        }
    }, [isDirty]);

但是它不起作用，因为只有当您更改已注册的字段时它才起作用，并且它不适用于这种情况。

如有任何指导或建议，我们将不胜感激。谢谢！

Answer 1

您可以使用

useEffect

 来观察表单状态的变化，特别是重置效果。这适用于检查表单数据是否脏污或监视值更改。

设置方法如下：

function CustomContent() {
    const { register, reset, watch } = useFormContext();
    const [isChecked, setIsChecked] = useState(false);
    const watchedValues = watch();     // Watcher for changes in the form data
    useEffect(() => {
        if (Object.keys(watchedValues).length === 0) {
            setIsChecked(false); // Form got reset
        }
    }, [watchedValues]);

    return (
        <div>
            <input {...register('firstName')} placeholder="First Name" />
            <input {...register('lastName')} placeholder="Last Name" />
            <label>
                <input
                    type="checkbox"
                    checked={isChecked}
                    onChange={() => setIsChecked((prev) => !prev)}
                />
                <span>Check me</span>
            </label>
        </div>
    );
}