Отправить данные searchParam из одного компонента в другой в reactjs - PullRequest
Новая
       31

Отправить данные searchParam из одного компонента в другой в reactjs

0 голосов
/ 06 августа 2020

У меня есть один компонент, который показывает список данных в раскрывающемся списке, и есть опция для поиска этих данных, которая работает как фильтр. Вот мой код: 

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;

Вот его гифка: https://recordit.co/HtalUtuPsj

Теперь во время поиска я хочу отправить значение параметра поиска в другой компонент, значение будет использоваться для поиска из БД или любого другого внешнего источника данных, который обрабатывается в этом новом компоненте. Например, если я ищу Ratings, этот компонент должен искать его в существующем списке параметров, который он имеет в своем собственном компоненте, а также в то же время он будет искать Ratings в любом другом внешнем источнике данных или БД. Этот внешний сетевой вызов, поиск или любые другие функции будут обработаны в другом компоненте. Таким образом, этот компонент будет отправлять только параметры поиска; например, Ratings другому компоненту в реальном времени.

Я могу придумать такую ​​идею, как я получу searchParam в состоянии и передам значение setState новому реквизиту, который будет вызываться через onSearchParamChange функция, эта новая функция будет передавать данные через обратный вызов, а другой компонент получит данные через вызов этих свойств этого компонента. Я не уверен, что это правильный путь, а также не могу реализовать эту мысль в коде. Есть ли лучший способ сделать это? если да, то какой будет эта реализация кодирования?

1 Ответ

1 голос
/ 06 августа 2020

Если вам нужно перейти к родительскому компоненту, вы должны иметь возможность использовать, например, свойство onChange, которое передается вашему компоненту, как вы это делаете в функции handleSelectedOption. Эта функция фактически передает выбранную опцию родительскому компоненту. Если вы хотите перейти к родительскому компоненту, когда пользователь вводит текст, вы должны вызвать функцию onChange также в searchFilter: 

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

Если вы хотите передать его дочернему компоненту, вы можете просто передать его как опору: 

<ChildComponent filter={ filter } />
...