react-hook-form 控制器问题

Posted 2023-02-22

【中文标题】react-hook-form 控制器问题

【英文标题】：react-hook-form Controller issues

【发布时间】：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

【参考方案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") />;