如何通过Ref获取PrimeReact InputText的底层HTMLInputElement？

我懂你碰到的这个问题——PrimeReact的InputText是封装过的组件，直接给它挂ref拿到的是组件类的实例，不是内部的<input> DOM元素，所以调用select()肯定会报错。别担心，PrimeReact专门提供了传递ref到底层输入框的属性，咱们来改一下代码：

解决方案步骤 #

• 首先把你的ref类型明确为React.RefObject<HTMLInputElement>，这样TypeScript能帮你做类型校验，避免any带来的隐患
• 给InputText组件用inputRef属性（而不是默认的ref）来绑定你的ref，这个属性是PrimeReact专门用来传递到底层input元素的
• 之后在componentDidMount里就能直接调用select()方法了

修改后的完整代码 #

import * as React from 'react';
import { InputText } from 'primereact/inputtext';

export class ValueCard extends React.Component<{}, {}> {
    // 明确ref类型为HTMLInputElement的RefObject
    textFieldRef: React.RefObject<HTMLInputElement> = React.createRef();

    componentDidMount = () => {
        // 现在current就是底层的input元素了，直接调用select()
        this.textFieldRef.current?.select();
    }

    render() {
        return (
            // 使用inputRef属性传递ref，而不是ref
            <InputText value="test" inputRef={this.textFieldRef} />
        );
    }
}

补充说明 #

PrimeReact的大部分表单组件（比如InputText、InputNumber等）都提供了类似的inputRef属性，用来让开发者获取到底层的原生DOM元素，这样就能调用原生的DOM方法比如select()、focus()这些了。原来的ref绑定到组件实例上，只能调用组件类对外暴露的方法，而不是原生input的方法，这就是你之前失败的原因。

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