Как создать простой фильтр элементов списка в React JS

В этом уроке мы узнаем, как создать простой фильтр списка элементов с помощью React JS.

Предпосылки

Прежде чем мы начнем, убедитесь, что у вас есть следующие предварительные условия:

• Базовые знания React JS и его концепций
• Node.js и npm установлены на вашем компьютере
• Редактор кода на ваш выбор

Начиная

Во-первых, давайте создадим новый проект React JS, используя следующую команду:

npx create-react-app list-items-filter

Это создаст новый проект с настройкой React JS по умолчанию.

Настройка компонента фильтра

Далее давайте настроим компонент фильтра, который позволит нам фильтровать список элементов.

Сначала создайте новый файл Filter.js в каталоге src и добавьте следующий код:

import React from 'react';

const Filter = ({ onChange }) => {
  return (
    <input type="text" placeholder="Filter list items" onChange={onChange} />
  );
};

export default Filter;

Этот компонент просто отображает поле ввода с обработчиками событий placeholder и onChange, которые будут запускаться, когда пользователь вводит данные в поле ввода.

Отображение списка предметов

Далее создадим компонент, отображающий список элементов.

Создайте новый файл List.js в каталоге src и добавьте следующий код:

import React from 'react';

const List = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default List;

Этот компонент просто отображает неупорядоченный список с элементами списка, переданными как свойство items.

Фильтрация списка элементов

Теперь, когда у нас настроены компоненты фильтра и списка, давайте создадим компонент, который будет фильтровать элементы списка на основе ввода пользователя.

Создайте новый файл App.js в каталоге src и добавьте следующий код:

import React, { useState } from 'react';
import Filter from './Filter';
import List from './List';

const App = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' }
  ]);
  const [filteredItems, setFilteredItems] = useState(items);

  const handleFilter = e => {
    const searchTerm = e.target.value.toLowerCase();
    const filteredList = items.filter(item =>
      item.name.toLowerCase().includes(searchTerm)
    );
    setFilteredItems(filteredList);
  };

  return (
    <div>
      <Filter onChange={handleFilter} />
      <List items={filteredItems} />
  );
};

export default App;

Этот компонент является корневым компонентом, который будет содержать компоненты фильтра и списка. Он также содержит логику для фильтрации списка элементов.

Во-первых, у нас есть состояние items, в котором хранится исходный список элементов. Затем у нас есть состояние filteredItems, в котором хранится отфильтрованный список элементов.

У нас также есть функция handleFilter, которая срабатывает, когда пользователь вводит текст в поле ввода фильтра. Эта функция фильтрует список items на основе ввода пользователя и обновляет состояние filteredItems с помощью отфильтрованного списка.

Наконец, мы визуализируем компоненты Filter и List и передаем функцию handleFilter и состояние filteredItems в качестве реквизита соответственно.

Подведение итогов

Вот и все! Теперь вы знаете, как создать простой фильтр элементов списка с помощью React JS.

Я надеюсь, что вы нашли этот урок полезным. Удачного кодирования!