React Hook Form如何在提交时附带额外元数据？

下面直接给你几种落地的实现方式，根据你的场景选就行：

1. 最简单：在onSubmit里手动拼接额外数据 #

如果你的元数据是固定的（比如某个字段的isSpecial标记），或者可以通过表单值推导出来（比如单选框的label），直接在提交时把数据重组就行，不用改输入组件的逻辑。

示例代码：

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

function App() {
  const { register, handleSubmit } = useForm();
  
  const onSubmit = (rawData) => {
    // 重组数据，给指定字段加上元数据
    const submitData = {
      ...rawData,
      // 给用户名字段加isSpecial标记
      username: {
        value: rawData.username,
        isSpecial: true
      },
      // 给单选框匹配对应的显示标签
      gender: {
        value: rawData.gender,
        label: rawData.gender === 'male' ? '男' : '女'
      }
    };
    
    console.log(submitData);
    // 这里把submitData发给后端就行
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="用户名" />
      
      <label>
        <input type="radio" value="male" {...register("gender")} /> 男
      </label>
      <label>
        <input type="radio" value="female" {...register("gender")} /> 女
      </label>
      
      <button type="submit">提交</button>
    </form>
  );
}

2. 灵活可控：用Controller组件自定义字段值结构 #

如果需要实时把输入值和元数据绑定（比如单选框选中时就同时存value和label），用React Hook Form的Controller组件来接管字段的逻辑，直接存储带元数据的对象。

示例代码：

import { useForm, Controller } from "react-hook-form";

function App() {
  const { control, handleSubmit } = useForm();
  
  const onSubmit = (submitData) => {
    console.log(submitData);
    // 此时submitData.gender就是{value: 'male', label: '男'}的结构
  };

  // 提前定义单选框的选项（方便维护）
  const genderOptions = [
    { value: 'male', label: '男' },
    { value: 'female', label: '女' }
  ];

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="gender"
        control={control}
        defaultValue={null}
        render={({ field }) => (
          <>
            {genderOptions.map(option => (
              <label key={option.value}>
                <input
                  type="radio"
                  // 判断当前选项是否被选中
                  checked={field.value?.value === option.value}
                  // 选中时直接把带label的对象传给表单
                  onChange={() => field.onChange({ value: option.value, label: option.label })}
                />
                {option.label}
              </label>
            ))}
          </>
        )}
      />
      
      <button type="submit">提交</button>
    </form>
  );
}

3. 自定义输入逻辑：重写register的onChange #

如果是普通输入框需要绑定元数据，可以在注册字段时自定义onChange函数，直接把带元数据的对象存到表单字段里。

示例代码：

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

function App() {
  const { register, handleSubmit } = useForm();
  
  const onSubmit = (submitData) => {
    console.log(submitData);
    // submitData.username是{value: '用户输入的内容', isSpecial: true}
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", {
          onChange: (e) => {
            // 自定义onChange返回值，把输入值和元数据打包成对象
            return {
              target: {
                name: "username",
                value: {
                  value: e.target.value,
                  isSpecial: true
                }
              }
            };
          }
        })}
        placeholder="用户名"
      />
      
      <button type="submit">提交</button>
    </form>
  );
}

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