[英]TypeError: can't define property “current”: Object is not extensible
I have a react component InputField :我有一个反应组件InputField :
export default function InputField({ name, type, placeholder, className }, ref) {
return (
<input
name={name}
type={type}
placeholder={placeholder}
className={InputTailwindStyle}
ref={ref}
/>
);
}
and I try to put it inside another component LoginForm where I am using react-hook-form to handle my form hooks:我尝试将它放在另一个组件LoginForm中,在该组件中我使用react-hook-form来处理我的表单挂钩:
import { useForm } from 'react-hook-form';
(some code ... )
const { register, handleSubmit } = useForm();
<InputField
name='password'
type='password'
placeholder='Password'
ref={register}
/>
but I get this error: TypeError: cannot define property "current": Object is not extensible但我收到此错误: TypeError: cannot define property "current": Object is not extensible
You need to use React.forwardRef
for property ref
to be valid in function component:您需要使用
React.forwardRef
使属性ref
在 function 组件中有效:
function InputField({ name, type, placeholder, className }, ref) {
return (
<input
name={name}
type={type}
placeholder={placeholder}
className={`py-2 text-cTxt placeholder-gray-400 bg-transparent border-b-2 my-5 border-cBtn rounded px-2 ${className}`}
ref={ref}
/>
);
}
export default React.forwardRef(InputField);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.