react-hook-form 控制器问题答案

【问题标题】：react-hook-form Controller issuesreact-hook-form 控制器问题
【发布时间】：2021-07-10 07:49:56
【问题描述】：

您好，我正在尝试使用 react-hook-form 和 material-ui 制作一种表单。我不想每次都为所有 TextField 编写 Controller。因此，我在另一个文件中声明它并以我的形式调用它，但它不起作用我不明白为什么，因为在我观看的一些视频中是有效的。有什么问题，我该如何解决？

表单域

import React from 'react'
import { TextField, Grid } from '@material-ui/core'
import { useForm, Controller, useFormContext  } from 'react-hook-form'

const FormField = ({name, label}) => {
const { control } = useForm()

return (
    <Grid item xs={12} sm={6} >
        <Controller 
            render = {({field}) => 
            <TextField 
                {...field}        
                label={label} required
            />}
            name={name}
            control = {control}
            defaultValue=""
        />
    </Grid>
)
}


export default FormField

地址表格

import React from 'react'
import { InputLabel, Select, MenuItem, Button, Grid, Typography, TextField } from '@material-ui/core'
import { useForm, FormProvider, Controller } from 'react-hook-form'
import FormField from './FormField'
import { Link } from 'react-router-dom'

const AdressForm = ({next}) => {
const {handleSubmit, control} = useForm()
return (
    <>
        <Typography variant="h6" gutterBottom>Shipping Address </Typography>
        
            <form onSubmit={handleSubmit((data) => console.log(data) )}>
                <Grid container spacing={3}>
                    <FormField name='firstName' label='First Name' required='required'/>
                    <FormField name='lastName' label='Last Name' />
                    <FormField name='email' label='Email' />
                    <FormField name='phoneNumber' label='Phone Number' />
                </Grid>
                <br/>
                <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                     <Button component={Link} to="/cart" variant="outlined">Back to Cart</Button>
                     <Button type="submit" variant="contained" color="primary">Next</Button>
                </div>
            </form>
        
    </>
)
}

export default AdressForm

【问题讨论】：

标签： reactjs controller react-hooks material-ui react-hook-form

【解决方案1】：

您必须为每个表单使用一个useForm 钩子，在您的代码中，您在每个Field 组件中调用useForm，创建多个独立的表单状态，这会导致意外结果。

您需要做的是在父元素中调用useForm，并将依赖项（register、formState、error...）向下传递到子组件，这样您的表单就可以有一个统一的状态。如果你有一个嵌套很深的组件，你可以使用useFormContext 轻松地将表单上下文传递给嵌套的子级：

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

【讨论】：