控制器使用 react-hook-form 的问题
Problem with the Controller using react-hook-form
这是我用于控制器的代码:
import React from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { TextField, Grid } from '@material-ui/core';
function FormInput({ name, label, required }) {
const { control } = useFormContext();
return (
<Grid item xs={12} sm={6}>
<Controller
as={TextField}
name={name}
control={control}
label={label}
fullWidth
required={required}
/>
</Grid>
);
}
export default FormInput;
这里是我调用 FormInput 的地方:
import React from 'react'
import { InputLabel, Select, MenuItem, Button, Grid, Typography } from '@material-ui/core'
import { useForm, FormProvider } from 'react-hook-form'
import FormInput from './CustomTextField'
const AdressForm = () => {
const methods = useForm()
return (
<>
<Typography variant="h6" gutterBottom>Shippng Adress</Typography>
<FormProvider {...methods}>
<form onSubmit=''>
<Grid container spacing={3}>
<FormInput required name="firstName" label="First name" />
</Grid>
</form>
</FormProvider>
</>
)
}
export default AdressForm
我得到这个错误:
"TypeError: props.render is not a function"
我正在尝试使用 react-hook-form 在 addressForm 中制作表单,但控制器出现问题。
根据文档,as
道具已在 react-hook-form v7 中删除,取而代之的是 render
道具。
这是我用于控制器的代码:
import React from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { TextField, Grid } from '@material-ui/core';
function FormInput({ name, label, required }) {
const { control } = useFormContext();
return (
<Grid item xs={12} sm={6}>
<Controller
as={TextField}
name={name}
control={control}
label={label}
fullWidth
required={required}
/>
</Grid>
);
}
export default FormInput;
这里是我调用 FormInput 的地方:
import React from 'react'
import { InputLabel, Select, MenuItem, Button, Grid, Typography } from '@material-ui/core'
import { useForm, FormProvider } from 'react-hook-form'
import FormInput from './CustomTextField'
const AdressForm = () => {
const methods = useForm()
return (
<>
<Typography variant="h6" gutterBottom>Shippng Adress</Typography>
<FormProvider {...methods}>
<form onSubmit=''>
<Grid container spacing={3}>
<FormInput required name="firstName" label="First name" />
</Grid>
</form>
</FormProvider>
</>
)
}
export default AdressForm
我得到这个错误:
"TypeError: props.render is not a function"
我正在尝试使用 react-hook-form 在 addressForm 中制作表单,但控制器出现问题。
根据文档,as
道具已在 react-hook-form v7 中删除,取而代之的是 render
道具。