我正在尝试使用 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)