亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

通過ref調用React功能組件中子組件的方法

通過ref調用React功能組件中子組件的方法

12345678_0001 2023-07-20 16:27:32
我正在使用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以便可以調用它的方法?
查看完整描述

1 回答

?
森欄

TA貢獻1810條經驗 獲得超5個贊

當 AutoComplete 呈現為功能組件時,我們可以使用useRef方法而不是createRef方法來獲取它的引用。請從下面找到修改后的示例。

示例鏈接https://codesandbox.io/s/throbbing-shadow-ddsmf


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 219 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號