访问 React 组件内的 HTML 个元素

Question

我有一个无法编辑的 React 组件 InputComponent，我想获得对其内部 div 之一的引用。（例如为了专注于输入字段）。

const RefsExamplePage = () => {

    return (
        <div>

            <div>
                <InputComponent
                title="Test component"
                ></InputComponent>
            </div>

        </div>

    )
}

export default RefsExamplePage;

如何实现？

Answer 1

which I cannot edit

如果你不能编辑它，你唯一能做的就是将 ref 传递给它并希望 InputComponent 已经实现了引用。

例如

const RefsExamplePage = () => {

    // use inputRef.current to access the input reference
    const inputRef = React.useRef()    

    return (
        <div>

            <div>
                <InputComponent
                    ref={inputRef}
                    title="Test component"
                />
            </div>

        </div>

    )
}

如果这不起作用或给您带来一些错误，您将需要修改 InputComponent

Answer 2

使用useRef() 创建组件本身的引用。这样你就可以获得组件引用，你可以使用它的 .current 属性来获取底层的 DOM:

const RefsExamplePage = () => {

    const inputRef = useRef();

    const getInput = e => {
       // here get the any dom node available
       inputRef.current.querySelector('input').focus();
    };

    return (....
           <InputComponent 
             ref={inputRef} 
             onClick={getInput} 
             title="Test component"/> // <---if no child are passed change to self closing
        ....)
}

Answer 3

如果 InputComponent 没有提供 ref 你可以包装它的父容器（div 容器）然后为它设置 ref:

import React, { useRef } from "react";

const RefsExamplePage = () => {
    const container = useRef();
    return (
        <div>

            <div ref={container}>
                <InputComponent
                title="Test component"
                ></InputComponent>
            </div>

        </div>

    )
}

export default RefsExamplePage;

然后就可以通过div的ref访问子元素了。

访问 React 组件内的 HTML 个元素

Accessing HTML elements inside a React component

reactjs

react-ref