Список фильтров в React - PullRequest
       2

Список фильтров в React

0 голосов
/ 27 февраля 2019

У меня проблема здесь.У меня есть реагирующий API, и я хочу сделать поле выбора для фильтрации данных по определенному атрибуту.

constructor() {

    super();
    this.state = {
        results: []
    };
}

Я получаю список предметов с именем и рейтингом.И я хочу отфильтровать с помощью выбора.Если я хочу видеть только предметы с рейтингом 5 или выше, выберите 5.

return (

<div className="container clearfix">
  {/* value={props.search}  */}
  <select>
    <option value="" />
    <option value="10">10</option>
    <option value="9">9</option>
    <option value="8">8</option>
  </select>
  <div>
    {props.results

      .map(item=> (
        <div key={item.id} className="item-holder">
          <img src={`${imagePath}${item.image}`} />
          <span className="votes">{item.rating}</span>
          <p>{item.title}</p>
        </div>
      ))}
  </div>
</div>

);

TX!

1 Ответ

0 голосов
/ 27 февраля 2019

Вам необходимо подключить слушателя к Select например

<Select onChange={(event) => this.setState({filterValue: event.target.value})}

, тогда вы можете отфильтровать результаты с помощью

props.results.filter((item) => item.rating >= this.state.filterValue)
             .map(...)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...