React Hooks Form：提交时未定义值

Question

我从文档中获取了示例：

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

但在每次更改或提交时，我都会得到undefined每个字段

我尝试再次安装该库，但没有任何变化，并且到处都未定义......似乎是注册功能的问题。有人遇到同样的问题吗？

Answer 1

就我而言，这是一个错字：

<input defaultValue="test" {...(register('name'), { required: true })} />

// submit => { name: undefined }

代替：

<input defaultValue="test" {...(register('name', { required: true }))} />

// submit => { name: "test" }

希望它可以帮助别人。

Answer 2

在 v7 中， 的用法发生了register变化，如评论中所述。如果你还需要使用v6，你就得这样写：

function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); 

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" name="example" ref={register} />
      <input type="submit" />
    </form>
  );
}

文档 v6