reactjs - react-hook-form Controller 问题

Question

您好，我正在尝试使用 react-hook-form 和 material-ui 做一种形式。我不想每次都为所有 TextFields 编写 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

Answer 1

您必须为每个表单使用一个useForm 钩子(Hook)，在您的代码中，您在每个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")} />;
}