react-hook-form 控制器问题

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 挂钩，在您的代码中，您在每个 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")} />;
}

react-hook-form 控制器问题

react-hook-form Controller issues

controller

reactjs

material-ui

react-hooks

react-hook-form