React-Input-Mask结合React-Hook-Forms遇No overload匹配错误

错误原因 #

这个错误源于react-input-mask传递给子渲染函数的属性（尤其是onChange事件）的签名，和Ant Design Input组件期望的事件签名不兼容。即使你给变量标注了any，TypeScript依然会在组件层级的类型校验中检测到这种不匹配。

修复方案 #

方案1：适配事件签名，传递兼容的属性 #

手动包装onChange事件，让它符合Ant Design Input的要求：

import "./styles.css";
import React from "react";
import { useForm, Controller } from "react-hook-form";
import InputMask from "react-input-mask";
import { Input } from "antd";

interface FormData {
  phoneNumber: string;
}

export default function App() {
  const { control, handleSubmit } = useForm<FormData>();
  const onSubmit = (data: FormData) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="phoneNumber"
        control={control}
        defaultValue=""
        render={({ field }) => (
          <InputMask
            mask="(999) 999-9999"
            maskChar=""
            value={field.value}
            onChange={field.onChange}
            onBlur={field.onBlur}
          >
            {(inputProps) => {
              // 适配事件签名，只传递Input需要的参数
              const adaptedProps = {
                ...inputProps,
                onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                  inputProps.onChange(e);
                }
              };
              return <Input {...adaptedProps} />;
            }}
          </InputMask>
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

方案2：直接使用InputMask的component属性 #

利用react-input-mask的component属性，直接将Ant Design Input作为它的底层组件，省去手动传递属性的步骤，类型会自动兼容：

import "./styles.css";
import React from "react";
import { useForm, Controller } from "react-hook-form";
import InputMask from "react-input-mask";
import { Input } from "antd";

interface FormData {
  phoneNumber: string;
}

export default function App() {
  const { control, handleSubmit } = useForm<FormData>();
  const onSubmit = (data: FormData) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="phoneNumber"
        control={control}
        defaultValue=""
        render={({ field }) => (
          <InputMask
            mask="(999) 999-9999"
            maskChar=""
            component={Input}
            {...field}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

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