如何使 react - hook - form 在一个页面中处理多个表单？

在React项目中使用react-hook-form来处理一个页面上的多个表单是一种常见需求，通常可以通过以下几种方式来实现：

1. 使用多个useForm Hooks

在React中，每个表单可以使用独立的useForm实例。这样可以保证每个表单的状态管理是独立的，互不影响。

jsx
import { useForm } from 'react-hook-form';

function MultiFormPage() {
    const { register: register1, handleSubmit: handleSubmit1 } = useForm();
    const { register: register2, handleSubmit: handleSubmit2 } = useForm();

    const onSubmitForm1 = data => {
        console.log('Form 1 Data:', data);
    };

    const onSubmitForm2 = data => {
        console.log('Form 2 Data:', data);
    };

    return (
        <div>
            <form onSubmit={handleSubmit1(onSubmitForm1)}>
                <input {...register1('firstName')} placeholder="First Name" />
                <input type="submit" />
            </form>

            <form onSubmit={handleSubmit2(onSubmitForm2)}>
                <input {...register2('lastName')} placeholder="Last Name" />
                <input type="submit" />
            </form>
        </div>
    );
}

2. 使用单个useForm但区分字段

在某些情况下，如果你想通过单个表单的实例来管理多个表单的数据，你可以在字段名称中使用一些命名约定来区分不同表单的字段。例如：

jsx
import { useForm } from 'react-hook-form';

function MultiFormPage() {
    const { register, handleSubmit, setValue, getValues } = useForm();

    const onSubmit = data => {
        console.log('Collected Data:', data);
    };

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input {...register('form1.firstName')} placeholder="First Name" />
                <input {...register('form2.lastName')} placeholder="Last Name" />
                <input type="submit" />
            </form>
        </div>
    );
}

在这个示例中，我使用了form1.firstName和form2.lastName作为字段名来区分属于不同表单的字段。

3. 动态表单

如果表单的数量或结构在运行时可能变化，可以动态创建useForm实例数组：

jsx
import { useForm } from 'react-hook-form';

function DynamicForms() {
    const forms = [
        useForm(),
        useForm(),
        // 可以根据需要动态增加更多
    ];

    const submitHandler = index => data => {
        console.log(`Form ${index + 1} Data:`, data);
    };

    return (
        <div>
            {forms.map((form, index) => (
                <form key={index} onSubmit={form.handleSubmit(submitHandler(index))}>
                    <input {...form.register(`field${index}`)} placeholder={`Field ${index + 1}`} />
                    <input type="submit" />
                </form>
            ))}
        </div>
    );
}

这种方式非常灵活，适合处理复杂的动态表单场景。

以上是几种常见的处理多个表单的策略。根据具体的需求和场景，选择适合的实现方式是关键。