React自定义输入组件ref获取失败及类型错误问题

问题背景 #

我们有一个无法修改的自定义类组件MyInput，其类型定义与代码如下：

import * as React from "react";

type Props = {
    value: string | null | undefined;
    label?: string | React.ReactNode;
    autofocus?: boolean;
    ref?: React.RefObject<HTMLInputElement>;
};

declare class MyInput extends React.Component<Props> {
    static defaultProps: {
        type: string;
    };
    handleFocus: () => void;
    render(): React.JSX.Element;
}

export { MyInput };

在主组件ComponentA中使用时遇到两个问题：

1. Ref属性类型错误，报错信息：

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): Input', gave the following error.
    Type 'RefObject<HTMLInputElement>' is not assignable to type '(LegacyRef<Input> & RefObject<HTMLInputElement>) | undefined'.
      Type 'RefObject<HTMLInputElement>' is not assignable to type 'RefObject<Input> & RefObject<HTMLInputElement>'.
        Type 'RefObject<HTMLInputElement>' is not assignable to type 'RefObject<Input>'.

2. 无法获取组件内部的input元素引用。

问题原因 #

• 类组件的默认ref指向组件实例（即MyInput本身），而非内部的input元素。但MyInput的Props错误定义了ref为RefObject<HTMLInputElement>，导致TypeScript类型不兼容。
• 由于无法修改MyInput，无法直接通过标准的forwardRef传递内部input的ref。

解决方案 #

1. 修正Ref类型错误 #

将useRef的类型指定为MyInput组件实例，而非HTMLInputElement，解决类型冲突：

function ComponentA(props: Props) {
  const myInputRef = React.useRef<MyInput>(null);

  // ...后续逻辑
}

2. 获取内部input元素引用 #

方法一：使用ReactDOM.findDOMNode（快速可行，注意严格模式警告）

通过findDOMNode获取组件对应的DOM元素，再转换为input类型：

import ReactDOM from 'react-dom';

function ComponentA(props: Props) {
  const myInputRef = React.useRef<MyInput>(null);
  const [name, setName] = React.useState('');

  const handleFocus = () => {
    const inputElement = ReactDOM.findDOMNode(myInputRef.current) as HTMLInputElement;
    inputElement?.select();
  };

  return (
    <MyInput
      autofocus={true}
      ref={myInputRef}
      onFocus={handleFocus}
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder={"sample Name"}
    />
  );
}

方法二：利用组件实例暴露的内部引用（若组件支持）

如果MyInput内部将input的ref挂载到了实例属性上（比如this.inputRef），可直接通过实例访问：

const handleFocus = () => {
  myInputRef.current?.inputRef?.current?.select();
};

注：此方法依赖MyInput的内部实现，需确认组件是否有此类暴露。

总结 #

• 调整ref类型指向MyInput实例，解决TypeScript类型错误。
• 通过findDOMNode或组件内部暴露的引用，获取并操作内部input元素。

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