React Hooks 表单在提交时不返回值

Question

我想构建一个表单，在其中循环遍历一系列问题并收集单选按钮的值以进行测验。稍后我想存储这些值，这样我就可以对结果执行一些计算，但现在我只想将值 (1,2,3,4) 和输入的名称记录到控制台。由于我是 React 和 Hooks 的新手，我尝试了以下方法，但记录的结果始终是一个 epmty 对象。期望的结果应该如下所示（内置 vanilla JS）：

https://florestankorp.github.io/D-D-AlignmentTest/

App.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 挂钩。查看文档，他们提供了一种称为“注册”的方法，您可以使用该方法使用挂钩注册每个输入组件。这需要合并到您的问题组件中。我会建议

Ensure you add a "key" attribute 映射问题数组时在问题组件上
将 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>
  );
}

现在您可以将此道具包含在您的问题组件中

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

编辑

从下面添加的评论中添加了 of @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 })} />

React Hooks 表单在提交时不返回值

React Hooks Form not returning values on submit

reactjs

react-hooks

react-hook-form

编辑