通过ref调用React功能组件中子组件的方法

Question

我正在使用syncfusion反应控件向我的应用程序添加一些功能。我想在我的功能组件中调用控件上的方法，但我无法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- 如何设置 实例的 refAutoCompleteComponent以便可以调用它的方法？

Answer 1

当 AutoComplete 呈现为功能组件时，我们可以使用useRef方法而不是createRef方法来获取它的引用。请从下面找到修改后的示例。示例链接：https://codesandbox.io/s/throbbing-shadow-ddsmf