React-hook-form 控制器问题

Question

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

表单字段

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

Answer 1

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

您需要做的就是调用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")} />;
}