TypeError: can't define property "current": Object is not extensible

Question

我有一个 React 组件 InputField :

export default function InputField({ name, type, placeholder, className }, ref) {
  return (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      className={InputTailwindStyle}
      ref={ref}
    />
  );
}

我尝试将它放在另一个组件 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}
/>

但我收到此错误： 类型错误：无法定义属性“当前”：对象不可扩展

Answer 1

您需要使用 React.forwardRef 才能使属性 ref 在函数组件中有效：

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);

TypeError: can't define property "current": Object is not extensible

TypeError: can't define property "current": Object is not extensible

javascript

reactjs

react-hooks

react-hook-form