reactjs - React Hooks Form 在提交时不返回值

Question

我想构建一个表单，在其中循环一系列问题并收集单选按钮的值以进行测验。稍后我想存储这些值，以便可以对结果执行一些计算，但现在我只想将值 (1,2,3,4) 和输入的名称记录到控制台。由于我是 React 和 Hooks 的新手，我尝试了以下方法，但记录的结果始终是一个 epmty 对象。期望的结果应该是这样的(内置 vanilla JS):
https://florestankorp.github.io/D-D-AlignmentTest/
应用程序.tsx

import React from 'react';
import { useForm } from 'react-hook-form';
import { Question } from '../shared/interfaces';

const QUESTIONS: Question[] = [
  {
    id: 'q201',
    question:
      '1. Family elders are expressing disapproval of you to the rest of the family. Do you:',
    option1: 'Accept the criticism and change your ways?',
    option2: 'Seek a compromise with them?',
    option3:
      'Besmirch the reputation of those expressing disapproval as you ignore their scorn?',
    option4: 'Silence them any way you can?',
  },
];

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: any) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {QUESTIONS.map((question) => (
        <Question {...question} />
      ))}
      <input type="submit" />
    </form>
  );
}

function Question(props: any): any {
  return (
    <div>
      <p className="question">{props.question}</p>
      <div>
        <input name={props.id} value="1" type="radio" />
        <label htmlFor={props.id}>{props.option1}</label>
      </div>
      <div>
        <input name={props.id} value="2" type="radio" />
        <label htmlFor={props.id}>{props.option2}</label>
      </div>
      <div>
        <input name={props.id} value="3" type="radio" />
        <label htmlFor={props.id}>{props.option3}</label>
      </div>
      <div>
        <input name={props.id} value="4" type="radio" />
        <label htmlFor={props.id}>{props.option4}</label>
      </div>
    </div>
  );
}

Answer 1

我看到你正在使用 useForm 钩子(Hook)。查看文档，他们提供了一种称为“注册”的方法，您可以使用该方法将每个输入组件注册到钩子(Hook)。这需要合并到您的问题组件中。
我会建议

Ensure you add a "key" attribute当您映射 QUESTIONS 数组

时，在 Question 组件上

将 register 作为 Prop 传递给 Question，并将其用作 ref={props.register}在每个输入组件上。

见下文

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: any) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {QUESTIONS.map((question) => (
        <Question {...question} register={register} key={question.id} /> //<-- notice register and key attribute
      ))}
      <input type="submit" />
    </form>
  );
}

现在你可以在你的问题组件中包含这个 Prop

function Question(props: any): any {
  return (
    <div>
      <p className="question">{props.question}</p>
      <div>
        <input name={props.id} value="1" type="radio" ref={props.register} /> //<-- note ref={props.register}
        <label htmlFor={props.id}>{props.option1}</label>
      </div>
      <div>
        <input name={props.id} value="2" type="radio" ref={props.register} />
        <label htmlFor={props.id}>{props.option2}</label>
      </div>
      <div>
        <input name={props.id} value="3" type="radio" ref={props.register} />
        <label htmlFor={props.id}>{props.option3}</label>
      </div>
      <div>
        <input name={props.id} value="4" type="radio" ref={props.register} />
        <label htmlFor={props.id}>{props.option4}</label>
      </div>
    </div>
  );
}

这应该会更新提交事件的状态。看到这个 CodeSandbox
编辑
添加了 Answer的 @Amit从下面添加的评论中

react-hook-form updated to 7.0.0 from 6.X.X and has breaking changes:

You have to replace all ref={register} with{...register('value_name')}

Example: Version 6.X.X:

<input ref={register({ required: true })} name="test" />

Version 7.0.X:

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