我以我用 react-hook-form 制作的这种形式将方法作为 Prop 传递。
当从 react-hook-form 添加 Controller 时,它给了我(TypeError:props.render 不是函数)。我在网上找不到任何解决方案,因此不胜感激。
import { useForm, FormProvider } from 'react-hook-form';
import FormInput from './CustomTextField';
const AddressForm = () => {
const methods = useForm();
return (
<>
<FormProvider {...methods}>
<form onSubmit=' '>
<Grid container spacing={3}>
<FormInput required name='firstName' label='First name' />
</Grid>
</form>
</FormProvider>
</>
);
};
import { useFormContext, Controller } from 'react-hook-form';
const FormInput = ({ name, label, required }) => {
const { control } = useFormContext();
return (
<>
<Controller
as={TextField}
name={name}
control={control}
label={label}
fullWidth
required={required}
/>
<>
);
};
export default FormInput;
最佳答案
陷入了类似的问题,
您可以尝试在 中进行以下更改表单输入 功能:
import React from 'react';
import { TextField, Grid } from '@material-ui/core';
import { useFormContext, Controller } from 'react-hook-form';
const FormInput = ({ name, label, required}) => {
const { control } = useFormContext();
const isError = false;
return (
<>
<Controller
control={control}
name={name}
render = {({ field})=> (
<TextField
fullWidth
label={label}
required
/>
)}
/>
</>
);
}
export default FormInput;
希望这有帮助,否则你可以通过 docs
关于javascript - TypeError : props. render is not a function (React hook form),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66957809/