我有一個組件,它在下拉列表中顯示數據列表,并且有一個選項可以搜索這些用作過濾器的數據。這是我的代碼:import React, { useState } from 'react';import PropTypes from 'prop-types';import classNames from 'classnames';import Popover from '../../Popover';import Input from '../../Input';import Icon from '../../Icon';import IconButton from '../../IconButton';const DropDownFilter = props => { const { label, options, onChange, isSearchEnabled } = props; const [activeOption, setActiveOption] = useState({}); const [filter, setfilter] = useState(''); const searchFilter = event => { setfilter(event.target.value); }; const removeFilter = () => { setfilter(''); }; const lowercasedFilter = filter.toLowerCase(); const filteredData = options.filter(item => { return Object.keys(item).some( key => typeof item[key] === 'string' && item[key].toLowerCase().includes(lowercasedFilter) ); }); const labelText = activeOption.label ? activeOption.label : label; const handleSelectedOption = option => { setActiveOption(option); onChange(option); }; return ( <div className="filter"> <Popover linkText={labelText} size="small" direction="bottom-left"> {isSearchEnabled && ( <div className="filter__search"> <Input value={filter} onChange={searchFilter} preIcon={ <div role="presentation"> <Icon name="search" /> </div> } 這是它的 gif:https ://recordit.co/HtalUtuPsj現在在搜索期間我想將搜索參數的值發送到另一個組件,該值將用于從數據庫或正在該新組件中處理的任何其他外部數據源進行搜索。例如,如果我正在搜索Ratings,這個組件應該在它自己的組件中的現有選項列表中搜索它,同時它會Ratings在任何其他外部數據源或數據庫中搜索。此外部網絡調用、搜索或任何其他功能將在其他組件中處理。所以這個組件只會發送搜索參數;例如Ratings實時到其他組件。我可以想到一個想法,比如讓 searchParam 處于某個狀態并將 setState 值傳遞給一個新的道具,該道具將通過 onSearchParamChange 函數調用,這個新函數將通過回調傳遞數據,另一個組件將獲得通過調用該組件的 props 來獲取數據。我不確定這是否是正確的方法,而且我也無法在代碼中實現這個想法。有沒有更好的方法呢?如果是這樣,那編碼實現是什么?
將searchParam數據從一個組件發送到reactjs中的另一個組件
慕勒3428872
2022-12-22 15:40:44