React Hook Form：如何正确将步进器数据传递给onSubmit的data属性？

你遇到的问题根源在于本地useState状态和React Hook Form的表单状态没有同步，同时错误地在Controller包裹的组件上混用了register方法，导致表单始终读取初始值0。

修复步骤 #

• 移除自定义的val状态，完全依赖React Hook Form的Controller管理步进器的值
• 删除TextField上的{...register('stepper')}，Controller已负责表单的注册和状态管理，混用会造成状态冲突
• 点击+/-按钮时，调用Controller提供的onChange方法更新表单状态，而非仅更新本地state

修改后的完整代码 #

import { InputAdornment, TextField } from '@mui/material';
import { Controller, useForm } from 'react-hook-form';

export const InputNumberStepper = () => {
  const {
    control,
    handleSubmit,
  } = useForm({
    defaultValues: {
      stepper: 0 // 在这里设置步进器初始值
    }
  });

  const onSubmit = async (data: any) => {
    console.log('🚀 ~ data:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="stepper"
        control={control}
        render={({ field: { onChange, value } }) => {
          console.log('🚀 ~ form value:', value);

          return (
            <TextField
              id="stepper"
              value={value}
              InputProps={{
                startAdornment: (
                  <InputAdornment
                    position="start"
                    onClick={() => {
                      onChange(value - 1);
                    }}
                  >
                    -
                  </InputAdornment>
                ),
                endAdornment: (
                  <InputAdornment
                    position="end"
                    onClick={() => {
                      onChange(value + 1);
                    }}
                  >
                    +
                  </InputAdornment>
                ),
              }}
            />
          );
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

关键修改说明 #

1. 统一状态管理：通过useForm的defaultValues设置初始值，不再需要本地useState，表单状态由React Hook Form统一维护
2. 避免方法混用：移除register调用，Controller已通过control和name完成字段注册，重复注册会导致状态不一致
3. 同步表单更新：点击按钮时调用onChange更新React Hook Form内部状态，确保提交时能获取到最新的步进器数值

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