类型错误：无法定义属性“当前”：Object 不可扩展

Question

我有一个反应组件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}
/>

但我收到此错误： TypeError: cannot define property "current": Object is not extensible

Answer 1

您需要使用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);