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

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

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>
              }
              placeholder="Search"
              postIcon={
                filter.length > 0 && (
                  <IconButton
                    icon={<Icon name="close" />}
                    size="tiny"
                    onClick={removeFilter}
                    standalone={true}
                    isIconOnly={true}
                  />
                )
              }
            />
          </div>
        )}
        <ul className="filter__options filter__options--scrollbar">
          {filteredData.map(option => (
            <li
              key={option.value}
              role="presentation"
              className={classNames('filter__options-option', {
                'filter__options-option--active': option.value === activeOption.value,
              })}
              onClick={() => handleSelectedOption(option)}
            >
              {option.label}
            </li>
          ))}
        </ul>
      </Popover>
    </div>
  );
};

DropDownFilter.defaultProps = {
  label: 'Filter Menu',
  options: [],
  isSearchEnabled: true,
};

DropDownFilter.propTypes = {
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  options: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    })
  ),
  onChange: PropTypes.func.isRequired,
  isSearchEnabled: PropTypes.bool,
};

export default DropDownFilter;

import React，{useState}来自“React”；
从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“../../Popover”导入Popover；
从“../../Input”导入输入；
从“../../Icon”导入图标；
从“../../IconButton”导入IconButton；
const DropDownFilter=props=>{
const{label，options，onChange，isSearchEnabled}=props；
const[activeOption，setActiveOption]=useState（{}）；
const[filter，setfilter]=useState（“”）；
const searchFilter=事件=>{
setfilter（event.target.value）；
};
常量removeFilter=（）=>{
设置过滤器（“”）；
};
const lowercasedFilter=filter.toLowerCase（）；
常量filteredData=options.filter（项=>{
返回对象。键（项）。一些(
key=>typeof item[key]=='string'&&item[key].toLowerCase（）.includes（小写过滤器）
);
});
const labelText=activeOption.label？activeOption.label:label；
const handleSelectedOption=选项=>{
设置活动选项（选项）；
onChange（选项）；
};
返回(
{isSearchEnabled&&(
0 && (
)
}
/>
)}

{filteredData.map（选项=>(
handleSelectedOption（选项）}
>
{option.label}

))}

);
};
DropDownFilter.defaultProps={
标签：“筛选菜单”，
选项：[]，
isSearchEnabled:没错，
};
DropDownFilter.propTypes={
标签：PropTypes.oneOfType（[PropTypes.string，PropTypes.node]），
选项：PropTypes.arrayOf(
PropTypes.shape({
标签：PropTypes.oneOfType（[PropTypes.string，PropTypes.node]），
值：PropTypes.oneOfType（[PropTypes.string，PropTypes.number]），
})
),
onChange:PropTypes.func.isRequired，
isSearchEnabled:PropTypes.bool，
};
导出默认下拉过滤器；

下面是它的gif：

现在，在搜索过程中，我想将搜索参数的值发送到另一个组件，该值将用于从数据库或在该新组件中处理的任何其他外部数据源进行搜索。例如，如果我正在搜索

评级

，则此组件应在其自身组件中的现有选项列表中搜索，同时也将在任何其他外部数据源或数据库中搜索

评级

。此外部网络呼叫、搜索或任何其他功能将在其他组件中处理。因此，该组件将只发送搜索参数；例如，将

评级

实时发送到其他组件

---

我可以想到一个想法，比如我将获取处于某个状态的searchParam，并将setState值传递给一个新的props，该props将通过onSearchParamChange函数调用，这个新函数将通过回调传递数据，另一个组件将通过调用该组件的props来获取数据。我不确定这是否是正确的方法，而且我也无法在代码中实现这一思想。有没有更好的办法？如果是这样，那么编码实现是什么？

如果需要传递给父组件，您应该能够使用传递给组件的

onChange

属性，就像您在

handleSelectedOption

函数中所做的那样。该函数实际上是将所选选项传递给父组件。如果要在用户键入时传递给父组件，则应在

searchFilter

中调用

onChange

函数：

  const searchFilter = event => {
    const option = event.target.value);
    setfilter(option);
    onChange(option);
  };

如果要将其传递给子组件，可以将其作为道具传递：

<ChildComponent filter={ filter } />

另一个组件是父组件还是子组件？@jamomani它可以同时是父组件和子组件。但大部分将是父组件this

constsearchfilter=event=>{constoption=event.target.value）；setfilter（option）；onChange（option）；}更改是否足以将搜索参数传递给父组件？我想在这个组件中引入一个道具，它将获取searchParam并将其传递给父组件。因此，在父组件中，当我使用此组件时，我将在props中获取searchParam，然后使用我在props中获取的值在DB或其他数据源中进行进一步搜索。这可以在当前代码库中完成吗？如果是，那么怎么做呢？我不知道父级如何使用onChange属性，但它看起来像是一个回调函数，用于将所选选项从子级传递到父级。对于我能说的，我认为它满足了你的需要。如果父母使用这个onChange道具，他们会从孩子那里得到想要的搜索参数吗？或者我需要引入一个像onSearchChange这样的新道具，并在那里传递搜索参数，然后使用该新道具在父级中获取参数。请回答这个问题。谢谢你好，我去看看。如果你觉得这个答案有用，请把它标记出来，这样其他人也会知道。