React Hook Form系列之三：嵌套表单

教程

发布日期: 2021-10-14

在创建复杂表单的时候，一个最好的方式就是使用一些子表单。在React Hook Form中，就可以使用FormProvider来实现这样的功能。通过这种方式，子表单能够和父表单共享状态。这样当父表单在提交的时候，就会生成一个统一的JSON对象。

图源：React Hook Form官网

React Hook Form系列

父表单

首先需要引入FormProvider

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

获取useForm返回的方法，这些方法将被传递给子表单

const methods = useForm<IFormInputs>({
    resolver: yupResolver(schema)
});

使用FormProvider作为form的容器，这样就能为子表单提供Context:

<FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(formSubmitHandler)}>
      <SubForm1/>
      <SubForm2/>
      <button type='submit'>Submit</button>
  </form>
</FormProvider>

子表单

在子表单中需要引入useFormContext:

import { useFormContext, Controller } from 'react-hook-form';

获取上下文：

const {
    control,
    formState: { errors },
} = useFormContext();

在子表单中使用上下文中传递过来的方法/属性：

<Controller name="firstName" 
            control={control}
            defaultValue=""
            render={({field}) => (
                <TextField {...field} label="First Name" 
                          variant="outlined"
                          error={ !!errors.firstName }
                          helperText={errors.firstName? errors.firstName?.message: ''}  
                          />
            )}/><br/>