Javascript 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);

import React，{Component}来自'React'；
从“reactstrap”导入{Table，Input}；
从'react redux'导入{connect}；
从“./actions/itemActions”导入{getItems，deleteItem}；
从“道具类型”导入道具类型；
类目录扩展组件{
componentDidMount（）{
this.props.getItems（）；
}
onDeleteClick=（id）=>{
此.props.deleteItem（id）；
}
render（）{
const{items}=this.props.item；
返回(


DayTimeMeeting名称地址城市IP代码
{items.map（{u id，日期，时间，会议名称，地址，城市，邮编}）=>(
{Day}{Time}{MeetingName}{Address}{City}{Zip}
{/*
&时代；
*/}
))}
);
}
}
Directory.propTypes={
getItems:PropTypes.func.isRequired，
项目：PropTypes.object.isRequired
}
常量mapStateToProps=（状态）=>({
项目：state.item
})
导出默认连接(
MapStateTops，
{getItems，deleteItem}
)（目录）；

您只需更改组件中的一些内容

初始化构造函数中的状态，如下所示

this.state = { searchedValue: '' };

在

input

<input type="text" placeholder="search" onChange={this.onSearch} value={this.state.searchedValue} />

使用

render

函数中的searchedValue过滤

项目
列表

const filteredItems = items.filter((item) => item.meetingName.includes(this.state.searchedValue));

使用

filteredItems

数组创建多个

tr

正如您在文章中的评论所述，这是一个不错的选择，但您可以选择最适合您的应用程序的选项

您可以使用like library，它可以轻松处理搜索功能

const filteredItems = items.filter((item) => item.meetingName.includes(this.state.searchedValue));