Реагировать на фильтрацию списка

Я не могу понять логику функции обратного вызова в приведенном ниже коде.

В его нынешнем виде список фильтруется по мере того, как пользователь вводит значение в поле ввода. Я не могу понять, как потом вернуть список, если фильтр будет удален.

https://codepen.io/benszucs/pen/BPqMwL?editors=0010

  class Application extends React.Component {
  state = {
    options: ['Apple', 'Banana', 'Pear', 'Mango', 'Melon', 'Kiwi']
  }
  handleFilter = (newFilter) => {
    if (newFilter !== "") {
      this.setState(() => ({
        options: this.state.options.filter(option => option.toLowerCase().includes(newFilter.toLowerCase()))
      }));
    }
  };
  render() {
    return (
      <div>
        <Filter handleFilter = {this.handleFilter} />
        {this.state.options.map((option) => <p>{option}</p>)}
      </div>
    );
  };
}

const Filter = (props) => (
  <div>
    <input name = "filter" onChange = {(e) => {
        props.handleFilter(e.target.value);
      }}/>
  </div>
);

ReactDOM.render(<Application />, document.getElementById('app'));

reactjs filter callback react-dom

08.08.2018 14:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

5 649

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку вы перезаписываете исходное значение состояния, вы не сможете его отменить. Я бы рекомендовал создать новое состояние под названием filter и обновить его значение в onChangeHandler(). А в методе render() вы должны отфильтровать результаты перед их отображением.

Пример:

// the state
this.state = {
    users: ['abc','pdsa', 'eccs', 'koi'],
    filter: '',
}

// the change handler
onChangeHandler(e) {
    this.setState({
        filter: e.target.value,
    });
}

// displaying the results
const list = this.state.users.filter(u => u.includes(this.state.filter)).map(u => (
    <li>{u}</li>
));

Приятно слышать :) Не забудьте отметить мой ответ как решение, если все работает хорошо ^^ '

— 08.08.2018 14:59

@BenSzucs, не могли бы вы отметить это как ответ на вопрос о помощи другим людям, а также @peetya?

— 08.08.2018 15:31

08.08.2018 14:50

В вашем фильтре дескриптора вы можете установить состояние по умолчанию

handleFilter = (newFilter) => {
    if (newFilter !== "") {
      this.setState(() => ({
        options: this.state.options.filter(option => option.toLowerCase().includes(newFilter.toLowerCase()))
      }));
    } else {
      this.setState(() => ({
        options: ['Apple', 'Banana', 'Pear', 'Mango', 'Melon', 'Kiwi']
      }));
    }

https://codepen.io/RACCH/pen/pZxMRJ

08.08.2018 14:54