React Hook Form中Controller验证MuiPhoneInput无法输入的解决方法

问题根源 #

MuiPhoneInput的onChange回调会返回两个参数（格式化后的号码、原始号码），但React Hook Form的onChange仅接收单个值，直接传递会导致表单值无法正确同步。另外如果未初始化表单默认值，也可能引发状态更新异常。

解决方案 #

1. 适配onChange参数格式

修改Controller中MuiPhoneInput的onChange逻辑，仅将格式化后的号码传递给React Hook Form的onChange：

<Controller
  name="phone"
  control={control}
  render={({ field: { onChange, value } }) => (
    <MuiPhoneInput
      value={value}
      onChange={(formattedNumber) => onChange(formattedNumber)}
      defaultCountry="il"
      variant="outlined"
      error={!!errors.phone}
      helperText={errors?.phone?.message}
    />
  )}
  rules={{
    required: "Phone is required",
  }}
/>

2. 初始化表单默认值

在useForm初始化时指定defaultValues，确保phone字段有初始状态：

const {
  register,
  handleSubmit,
  formState: { errors },
  control,
} = useForm({
  defaultValues: {
    phone: ""
  }
});

额外检查项 #

• 确认MuiPhoneInput版本与React Hook Form v7.43.1兼容
• 排查是否存在其他自定义逻辑（如输入拦截、状态覆写）影响值的同步

内容的提问来源于stack exchange，提问作者MD. MEHEDI IMAM