React Hook Form同名register绑定MUI双输入组件异常求解

• react-hook-form 要求同名字段仅可注册一次，代码中两处{...register("level")}属于重复注册，会触发表单内部值更新逻辑冲突，直接导致组件运行不稳定
• 现有代码同时维护本地numberInput状态与react-hook-form表单状态，两套独立状态管理逻辑在交互时会互相覆盖，进一步引发异常
• MUI Slider 为自定义受控组件，不支持原生input的ref、onChange等属性直接透传，直接展开register返回的属性本身属于错误用法，无法正常触发表单值同步。

使用react-hook-form提供的Controller组件作为level字段的唯一注册入口，移除本地独立状态，以表单内部状态作为唯一可信数据源，让滑块、数字输入框两个组件共用同一份字段值与更新方法，从根源解决冲突。

修正后可直接运行的代码如下：

import Slider from "@mui/material/Slider";
import MuiInput from "@mui/material/Input";
import { useForm, Controller } from "react-hook-form";
// 其他业务依赖导入，如gameComplexityLevels

export default function LevelForm() {
  const { handleSubmit, control } = useForm<{
    level: number;
  }>({
    defaultValues: {
      level: 1,
    },
  });

  const onSubmit = (data: { level: number }) => {
    // 处理提交逻辑，直接读取data.level即可
    console.log("提交的level值：", data.level);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="level"
        control={control}
        render={({ field }) => (
          <>
            <Slider
              valueLabelDisplay="auto"
              step={1}
              min={1}
              max={20}
              marks={gameComplexityLevels}
              value={field.value}
              onChange={(_, value) => field.onChange(value as number)}
            />
            <MuiInput
              size="small"
              value={field.value}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                const inputVal = e.target.valueAsNumber;
                // 拦截非法输入、超出范围的输入
                if (isNaN(inputVal)) {
                  field.onChange(1);
                  return;
                }
                field.onChange(Math.min(20, Math.max(1, inputVal)));
              }}
              inputProps={{
                step: 1,
                min: 1,
                max: 20,
                type: "number",
                "aria-labelledby": "input-slider",
              }}
            />
          </>
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

关键调整说明 #

• 仅通过Controller注册一次level字段，彻底解决重复注册问题
• 删除本地useState维护的numberInput状态，所有值的读取、更新都通过Controller提供的field对象完成，保证单一数据源，避免多套状态互相覆盖
• 适配两个MUI组件的不同回调规则：Slider的onChange回调第二个参数才是当前选中值，直接透传给field.onChange即可；数字输入框增加非法值、边界值拦截，避免输入非数字、超出1-20范围的异常值
• 两个组件的value属性统一绑定field.value，任意一个组件修改值后，另一个组件会自动同步最新值，滑块拖动、数字输入两种交互方式完全互通
• 提交逻辑无需额外合并状态，直接从handleSubmit的回调参数中即可拿到准确的level字段值。

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