React Hook Form中点击单选框时提交表单的实现问题

你可以通过两种简洁的方式实现点击单选选项自动提交表单：

方法一：利用register的onChange回调 #

直接在注册单选框时绑定onChange事件，触发表单提交逻辑：

const Form0 = () => {
  const { register, handleSubmit } = useForm();

  const submitFunction = (data) => {
    console.log("submitted:", data);
  };

  // 提前生成提交处理函数，避免重复调用handleSubmit
  const onSubmit = handleSubmit(submitFunction);

  return (
    <form onSubmit={onSubmit}>
      <label>
        <input
          type="radio"
          value="foo"
          {...register("radio-button", {
            onChange: () => onSubmit()
          })}
        />
        foo
      </label>

      <label>
        <input
          type="radio"
          value="bar"
          {...register("radio-button", {
            onChange: () => onSubmit()
          })}
        />
        bar
      </label>

      <label>
        <input
          type="radio"
          value="foobar"
          {...register("radio-button", {
            onChange: () => onSubmit()
          })}
        />
        foobar
      </label>
    </form>
  );
};

方法二：用watch监听单选值变化 #

通过watch实时监听单选框的值，结合useEffect自动触发提交：

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';

const Form0 = () => {
  const { register, handleSubmit, watch } = useForm();

  const submitFunction = (data) => {
    console.log("submitted:", data);
  };

  const onSubmit = handleSubmit(submitFunction);
  // 监听单选框的选中值
  const radioValue = watch("radio-button");

  useEffect(() => {
    // 跳过初始未选中状态的无效提交
    if (radioValue) {
      onSubmit();
    }
  }, [radioValue, onSubmit]);

  return (
    <form onSubmit={onSubmit}>
      <label>
        <input type="radio" value="foo" {...register("radio-button")} />
        foo
      </label>

      <label>
        <input type="radio" value="bar" {...register("radio-button")} />
        bar
      </label>

      <label>
        <input type="radio" value="foobar" {...register("radio-button")} />
        foobar
      </label>
    </form>
  );
};

你之前尝试无效的原因 #

• 给label绑定onClick={() => handleSubmit(submitFunction)}时，handleSubmit返回的是一个待执行的提交函数，必须调用它才会生效（即handleSubmit(submitFunction)()），但这种方式不符合React Hook Form的设计逻辑。
• 将input改为type="submit"会破坏单选框的原生分组逻辑，相同name的submit按钮点击时会默认选中第一个选项，导致提交值错误。

内容的提问来源于stack exchange，提问作者Fernando