Блог

Главная - Вопросы по программированию - вызов метода для подкомпонента в функциональном компоненте React через ref

вызов метода для подкомпонента в функциональном компоненте React через ref

#javascript #reactjs #syncfusion #react-ref

#javascript #reactjs #syncfusion #react-ref

Вопрос:

Я использую syncfusion элементы управления react для добавления некоторой функциональности в мое приложение. Я хочу вызвать метод для элемента управления в моем функциональном компоненте, но я не смог правильно получить ref набор:

 import React, {createRef, useEffect, useState} from "react";
import {AutoCompleteComponent} from "@syncfusion/ej2-react-dropdowns";
import "@syncfusion/ej2-base/styles/bootstrap.css";
import "@syncfusion/ej2-react-inputs/styles/bootstrap.css";
import "@syncfusion/ej2-react-dropdowns/styles/bootstrap.css";

const UserLookup = ({userSelected}) => {
    const [searchString, setSearchString] = useState('');
    const [items, setItems] = useState([]);
    const helper = new QueryHelper();
    let listObj = createRef();

    const searchStringChanged = (args) => {
        console.log(args.text);
        if (args.text.length > 3) {
            setSearchString(args.text);
        }
    }

    const optionSelected = (event) => {
        memberSelected(event.item.id);
    }

    useEffect(() => {
        fetch('http://example.com/myendpoint')
          .then(response.map((result) => {
                            listObj.current.showPopup(); // <-- this method should be called on the autocomplete component
                            return {
                                id: result.contactId,
                                label: result.firstName   ' '   result.lastName
                            }
                        }))
          .then(data => console.log(data));
    }, [searchString]);

    return (
        <AutoCompleteComponent
            id="user_search"
            autofill={true}
            dataSource={items}
            fields={
                {
                    value: 'label'
                }
            }
            filtering={searchStringChanged}
            select={optionSelected}
            popupHeight="250px"
            popupWidth="300px"
            placeholder="Find a contact (optional)"
            ref={listObj}
        />
    );
};

export default UserLookup;

это всегда выдает ошибку, которая Cannot read property 'showPopup' of null — как вы устанавливаете ссылку для экземпляра AutoCompleteComponent , чтобы вы могли вызывать для него методы?

Комментарии:

1. интересно, поможет ли передача в useEffect(() => {..}, [searchString, listobj.current]) ref useEffect, а затем проверка if (listObj.current) перед fetch этим? ref запускается как null, пока не будет установлено значение get, поэтому, если строка поиска изменена, будет вызван useEffect, но ref все равно может быть null?

2. в функциональном компоненте вам нужен useRef , а не createRef . Использование createRef даст вам новую ссылку при каждом рендеринге, она не будет сохранена.

Ответ №1:

Мы можем получить ссылку на автозаполнение, когда оно отображается как функциональный компонент, с помощью использования метода useRef вместо метода createRef . Пожалуйста, найдите измененный образец ниже.

Пример ссылки: https://codesandbox.io/s/throbbing-shadow-ddsmf