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

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

將searchParam數據從一個組件發送到reactjs中的另一個組件

將searchParam數據從一個組件發送到reactjs中的另一個組件

慕勒3428872 2022-12-22 15:40:44
我有一個組件,它在下拉列表中顯示數據列表,并且有一個選項可以搜索這些用作過濾器的數據。這是我的代碼: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 來獲取數據。我不確定這是否是正確的方法,而且我也無法在代碼中實現這個想法。有沒有更好的方法呢?如果是這樣,那編碼實現是什么?
查看完整描述

1 回答

?
慕村9548890

TA貢獻1884條經驗 獲得超4個贊


如果您需要傳遞給父組件,您應該能夠使用onChange傳遞給您的組件的道具,就像您在handleSelectedOption函數中所做的那樣。該函數實際上是將選擇的選項傳遞給父組件。如果你想在用戶輸入時傳遞給父組件,那么你也應該調用該onChange函數searchFilter:


  const searchFilter = event => {

    const option = event.target.value);

    setfilter(option);

    onChange(option);

  };

如果你想將它傳遞給子組件,你可以將它作為 prop 傳遞:


<ChildComponent filter={ filter } />


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 80 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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