React Hooks Form：提交时未定义的值

Question

我从 documentation 中拿了例子：

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

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

Docs v6

Answer 2

在我的例子中，我安装了“npm i react-hook-form”，我不知道为什么，但它安装了 ^6.15.8 版本，我删除它并重试，然后安装正确。因此，请尝试检查您的 react-hook-form

版本

Answer 3

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

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

// submit => { name: undefined }

而不是：

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

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

希望对其他人有所帮助。

Answer 4

在我的例子中，我使用的是 Controller，因此要修复未定义的值，我只需将 defaultValues 传递给 useForm。请参阅此处的规则部分：https://react-hook-form.com/api/useform/watch

 const { register, handleSubmit, control, setValue} = useForm<MyFormValues>({
    defaultValues : {
      receiveUpdates: false
    }
  });

<Controller
  control={control}
  name="receiveUpdates"
  render={({ field }) => (
    <FormControlLabel
      control={
        <Checkbox
          ref={field.ref}
          checked={field.value}
          onChange={field.onChange}
        />
      }
      label="Receive Email Updates?"
      labelPlacement="start"
    />
  )}
/>

Answer 5

我在使用 reactstrap 的输入组件时遇到了这个问题。使用该组件使我所有的值都未定义。我将输入切换为正常输入并能够读取值

之前：

<Input 
                placeholder="Password"
                type="password"
                id="password"
                defaultValue=""
                {...register('password')}
                required
              />

固定：

<input 
                placeholder="Password"
                type="password"
                id="password"
                defaultValue=""
                {...register('password')}
                required
              />

React Hooks Form：提交时未定义的值

React Hooks Form : undefined values on submit

javascript

reactjs

react-hooks

react-hook-form