ReactJS Как добавить фильтр поиска для данных из базы данных

Я пытаюсь добавить поисковый запрос для фильтрации данных, которые я получаю из базы данных. Может ли кто-нибудь рассказать мне, как я могу фильтровать и отображать результаты поиска. Я хочу найти MeetingName, которое было сопоставлено с элементами. Прямо сейчас приложение отображает весь список элементов из базы данных.

Спасибо.

import React, { Component } from 'react';
import { Table, Input } from 'reactstrap';
import { connect } from 'react-redux';
import { getItems, deleteItem } from "../actions/itemActions";
import PropTypes from 'prop-types';

class Directory extends Component {

    componentDidMount() {
        this.props.getItems();
    }

    onDeleteClick = (id) => {
        this.props.deleteItem(id);
    }

    render() {
        const { items } = this.props.item;

        return(
            <div>
                <Input type = "text" placeholder = "search"/>
                <br/>
                <Table>
                    <thead>
                    <tr>
                        <th>Day</th><th>Time</th><th>Meeting Name</th><th>Address</th><th>City</th><th>Zip Code</th><th></th>
                    </tr>
                    </thead>
                    {items.map(({ _id, Day, Time, MeetingName, Address, City, Zip }) => (
                        <tbody key = {_id}>
                        <tr>
                            <td>{Day}</td><td>{Time}</td><td>{MeetingName}</td><td>{Address}</td><td>{City}</td><td>{Zip}</td>
                            {/*<Button
                                className = "remove-btn"
                                color = "danger"
                                size = "sm"
                                onClick = {this.onDeleteClick.bind(this, _id)}
                            >
                                &times;
                            </Button>*/}
                        </tr>
                        </tbody>
                    ))}
                    </Table>
            </div>
        );
    }
}

Directory.propTypes = {
    getItems: PropTypes.func.isRequired,
    item: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
    item: state.item
})


export default connect(
    mapStateToProps,
    { getItems, deleteItem }
    )(Directory);

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

Harikrishnan 15.07.2018 12:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
2 601
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вам нужно изменить несколько вещей в вашем компоненте

  1. Состояние инициализации в конструкторе, как показано ниже

    this.state = { searchedValue: '' };
    
  2. Добавить прослушиватель событий onChange на input

    <input type = "text" placeholder = "search" onChange = {this.onSearch} value = {this.state.searchedValue} />
    
  3. Измените состояние с введенным значением при вызове функции onSearch

    onSearch = (event) => {
        this.setState({ searchedValue: event.target.value });
    }
    
  4. Отфильтруйте список items с помощью searchValue в функции render

    const filteredItems = items.filter((item) => item.meetingName.includes(this.state.searchedValue));
    
  5. Используйте массив filteredItems для создания нескольких tr

Как указано в комментарии к вашему сообщению, реагировать-данные-сетка - хороший вариант, но вы можете выбрать то, что лучше всего подходит для вашего приложения.

Другие вопросы по теме