Доступ к элементам HTML внутри компонента React - PullRequest
Новая
       6

Доступ к элементам HTML внутри компонента React

1 голос
/ 27 февраля 2020

У меня есть компонент React InputComponent , который я не могу редактировать, и я хотел бы получить ссылку на один из его внутренних элементов div. (например, чтобы сфокусироваться на поле ввода). 

const RefsExamplePage = () => {

    return (
        <div>

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

        </div>

    )
}

export default RefsExamplePage;

Как мне этого добиться?

Ответы [ 3 ]

2 голосов
/ 27 февраля 2020

, который я не могу отредактировать

Если вы не можете отредактировать его, единственное, что вы можете сделать, - передать ему 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

1 голос
/ 27 февраля 2020

Если 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.

0 голосов
/ 27 февраля 2020

Используйте 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
        ....)
}
...