在react-hook-form输入框添加ref导致表单无法渲染的原因咨询

核心问题：register使用方式错误 #

在react-hook-form v7版本中，register是一个函数，它会返回包含ref、name等属性的对象，不能直接将register作为ref属性的值传递给输入框。你代码里的ref={register}写法不符合API要求，会导致React无法正确处理引用，进而引发渲染异常。

修正后的代码 #

import './App.css';
import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 正确用法：展开register函数返回的属性集合 */}
      <input type='text' placeholder='Email' {...register('email')} />
      <input type='password' placeholder='Password' {...register('password')} />
      <input type='submit'/>
    </form>
  );
}

export default App;

额外检查项 #

• 确认安装的是react-hook-form v7版本：查看package.json中的依赖项，或执行npm list react-hook-form查看版本号。v7是当前稳定版本，建议使用该版本。
• 确保React版本达标：react-hook-form v7要求React 16.8.0及以上版本（依赖Hooks特性），若你的React版本过低，也可能引发兼容问题。

内容的提问来源于stack exchange，提问作者jack