小编Lex*_*isa的帖子

React Hook 表单和 Material UI 的 TextField 中的不受控输入到受控输入警告

我正在尝试使用 React Hook Form(版本 7.6.6)构建一个表单。我创建了一个 FormInput 组件,如下所示:

const FormInput = ({ name, label }) => {
  const { control } = useFormContext();

   return (
    <Grid item xs={12} sm={6}>
      <Controller
        control={control}
        name={name}
        render={({ field }) => {
          return <TextField {...field} label={label} fullWidth required />;
        }}
      />
    </Grid>
  );
Run Code Online (Sandbox Code Playgroud)

我在这里使用它:

<FormProvider {...methods}>
        <form onSubmit={handleSubmit((data) => console.log(data))}>
            <FormInput name="firstName" label="First Name" />
            <FormInput name="lastName" label="Last Name" />
            <FormInput name="address1" label="Address 1" />
            <FormInput name="email" label="Email" />
            <FormInput name="zip" label="ZIP code" />
       
         
          <Button
            type="submit" …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui react-hook-form

13
推荐指数
1
解决办法
2万
查看次数

标签 统计

material-ui ×1

react-hook-form ×1

reactjs ×1