javascript - 类型错误 : 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 来处理我的表单 Hook :

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