Ant Design Input接入react-phone-number-input报hasAttribute错误怎么办

算力阿峰

2026-8-27

问题场景

参考react-phone-number-input自定义输入框的使用示例，尝试在该手机号输入组件中接入Ant Design的Input组件
Ant Design的Input属于复合组件，仅当直接将其作为inputComponent属性值传入时会触发运行时报错，换用其他普通输入组件无异常
报错信息如下：

Unhandled Runtime Error
TypeError: element.hasAttribute is not a function

原有业务代码（注：原代码AntD导入路径存在笔误，正确包名为antd）：

import PhoneInput from 'react-phone-number-input'
import { Input } from 'antd'

<Form.Item name="phone">
 <PhoneInput inputComponent={Input} />
</Form.Item>

核心诉求：从Ant Design的复合Input组件中获取纯基础输入组件，实现和react-phone-number-input库的正常兼容

解决方法

报错本质原因：react-phone-number-input内部会给传入的输入框组件绑定ref，直接调用原生DOM的hasAttribute方法。直接传入AntD复合Input组件时，ref拿到的是React组件实例而非原生input DOM节点，实例上不存在该DOM方法，因此抛出错误。
不需要从AntD内部导出未公开的基础组件，两种可直接使用的方案：

方案1：写一层轻量适配组件做ref转发，对接AntD Input官方提供的inputRef属性（该属性专门用于绑定内部原生input节点的ref），满足库的ref要求：

import { forwardRef } from 'react'
import PhoneInput from 'react-phone-number-input'
import { Input, Form } from 'antd'

// 适配层组件，透传所有属性、转发ref到原生input
const AntdInputAdapter = forwardRef((props, ref) => {
  return <Input {...props} inputRef={ref} />
})

// 业务代码直接使用适配后的组件
<Form.Item name="phone">
  <PhoneInput inputComponent={AntdInputAdapter} />
</Form.Item>