将searchParam数据从一个组件发送到reactjs中的另一个组件

Question

我有一个组件，它在下拉列表中显示数据列表，并且有一个选项可以搜索这些用作过滤器的数据。这是我的代码：

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 来获取数据。我不确定这是否是正确的方法，而且我也无法在代码中实现这个想法。有没有更好的方法呢？如果是这样，那编码实现是什么？

Answer 1

如果您需要传递给父组件，您应该能够使用onChange传递给您的组件的道具，就像您在handleSelectedOption函数中所做的那样。该函数实际上是将选择的选项传递给父组件。如果你想在用户输入时传递给父组件，那么你也应该调用该onChange函数searchFilter：&nbsp; const searchFilter = event => {&nbsp; &nbsp; const option = event.target.value);&nbsp; &nbsp; setfilter(option);&nbsp; &nbsp; onChange(option);&nbsp; };如果你想将它传递给子组件，你可以将它作为 prop 传递：<ChildComponent filter={ filter } />