React ref для функционального компонента, не удалось получить ссылку: функциональным компонентам нельзя дать refs

Я создаю веб-сайт React с элементами управления пакетом fluentui / react-nothstar . Ниже вы можете найти упрощенный пример Text + Button. Мой сценарий - получить доступ к текстовому элементу управления при нажатии кнопки. Мне нужно что-то вроде document.findElementById, которое работает через refs в React. Он отлично работает для элементов управления компонентами (который расширяет React.Component), но не работает для компонентов Northstar с ошибкой:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Основываясь на деталях предупреждения и определении элемента управления Text, похоже, что это функциональный компонент, и я должен использовать React forwardRef, чтобы получить доступ к его свойствам. Я пробовал несколько способов сделать это здесь, здесь и здесь, но не удалось.

import React from 'react';
import {
    Text,
    Button,
}
    from '@fluentui/react-northstar';

class Welcome extends React.Component {

    private textRef: any = React.createRef();

    private doJob1() {
        console.log("doJob1 executed");
        console.log(this.textRef.current); // returns null
    }

    render() {
        return (
            <div>
                <div>Welcome</div>
                <div>
                    <Text
                        ref={this.textRef}
                        content="My fancy text control" />
                    <Button
                        onClick={this.doJob1.bind(this)}
                        content="My fancy button" />

                </div>
            </div>
        );
    }
}

export default Welcome;

В большинстве случаев я могу избежать прямого доступа к элементам, используя реквизиты и состояние, но в некоторых случаях мне все еще нужна ссылка на компонент (изменение фокуса, открытие диалогового окна, значения обновления, не определенные в моем состоянии).

Как правильно получить доступ к элементу управления Text в обработчике нажатия кнопки в приведенном выше примере?


reactjs typescript javascript react-forwardref ref
person Alexey Strakh    schedule 07.06.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В этом случае библиотеке необходимо переслать ссылку, чего, по-видимому, нет.

Но в целом вы хотите использовать контролируемые компоненты для захвата подобного ввода пользователя. . По сути, вам нужно установить переменную для отслеживания значения в родительском компоненте (Добро пожаловать в вашем случае), передать ее как value компоненту <Text /> и зафиксировать изменения из его onChange. Затем на кнопке onClick значение будет актуальным с учетом всех вводимых пользователем данных.

person Gabriel Vilches Alves    schedule 07.06.2021
comment
Спасибо! Это именно то, что я использую для поддержания единого источника истины, и в большинстве случаев он работает нормально, но не во всех. Например, Datepicker onDateChange не предоставляет новое значение в event.target.value, и мне нужна ссылка на элемент управления для чтения значения: github.com/microsoft/fluentui/issues/18458 - person Alexey Strakh; 08.06.2021
comment
Я не знаю подробностей о свободном пользовательском интерфейсе, но пробовали ли вы onDateChange = {console.log}, чтобы узнать, какой формат он отправляет обратно? - person Gabriel Vilches Alves; 09.06.2021
comment
Если я печатаю tp console event.target вместо элемента управления, он дает мне кнопку datePicker <button role="gridcell" data-aa-class-'DatepickerCalendarCellButton; ... />, и я не могу получить значение с помощью обычного event.target.value. - person Alexey Strakh; 22.06.2021

arrow_upward
0
arrow_downward

Оказалось, что Ref предназначен для этого. :

<Ref innerRef={this.textRef}>
    <Text content="My fancy text control" />
</Ref>
person Alexey Strakh    schedule 25.06.2021