[英]Send searchParam data from one Component to another component in 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;
这是它的 GIF: https://recordit.co/HtalUtuPsj
现在在搜索过程中,我想将搜索参数的值发送到另一个组件,该值将用于从数据库或该新组件中正在处理的任何其他外部数据源进行搜索。 例如,如果我正在搜索Ratings
,该组件应该在它自己组件中的现有选项列表中搜索它,同时它会在任何其他外部数据源或数据库中搜索Ratings
。 此外部网络调用、搜索或任何其他功能将在其他组件中处理。 所以这个组件只会发送搜索参数; 例如实时对其他组件的Ratings
。
I can think of an idea like I will get the searchParam in a state and pass the setState value to a new props which will be called through an onSearchParamChange function, this new function will pass the data through a callback and the other component will get the通过调用该组件的该道具来获取数据。 我不确定这是否是正确的方法,而且我也无法在代码中实现这个想法。 有没有更好的方法呢? 如果是这样,那将是什么编码实现?
如果您需要传递给父组件,您应该能够使用例如传递给组件的onChange
道具,就像您在handleSelectedOption
function 中所做的那样。 function 实际上是将选择的选项传递给父组件。 如果您想在用户键入时传递给父组件,那么您应该在 searchFilter 中调用onChange
searchFilter
:
const searchFilter = event => {
const option = event.target.value);
setfilter(option);
onChange(option);
};
如果要将其传递给子组件,则可以将其作为 prop 传递:
<ChildComponent filter={ filter } />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.