類型錯誤：無法定義屬性“當前”：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);