警告：为输入提供了意外的 ref 对象。使用 ref-setter 函数或 React.createRef()。使用 React Hook 形式

Question

我是 react-hook-form 的新手。我在下面粘贴我的代码


import React from "react";
import { useForm } from "react-hook-form";

const Inventory = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        className="border border-gray-900 rounded-lg p-2"
        type="number"
        placeholder="Number"
        ref={register("number", { required: true })}
      />
      {errors.number && <p>This is required</p>}
      <button
        className="mt-4 text-white bg-gray-900 border-2 border-gray-900 rounded-md px-2 py-1"
        type="submit"
      >
        Add
      </button>
    </form>
  );
};

export default Inventory;

当我提交表单时，我在控制台中没有得到任何输出。我也收到警告

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef().

这里有什么问题？

谢谢

Answer 1

好的，我在代码中犯了一个错误。这是我写的

 ref={register("number", { required: true })}

而不是这个

{...register("number", { required: true })}

Answer 2

对于我的情况，我删除了 ref 不知道它是否是正确的解决方法

警告：为输入提供了意外的 ref 对象。使用 ref-setter 函数或 React.createRef()。使用 React Hook 形式

Warning: Unexpected ref object provided for input. Use either a ref-setter function or React.createRef(). With React Hook Form

javascript

reactjs

react-hook-form

react-forms