reactJS如何為數據庫中的數據添加搜索過濾器

Question

我正在嘗試添加搜索輸入以過濾從數據庫接收到的數據。 誰能指導我逐步介紹如何過濾和顯示搜索結果。 我想搜索從項目映射的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);

Answer 1

您需要更改組件中的一些內容

1. 在構造函數中初始化狀態如下

    this.state = { searchedValue: '' }; 

2. 在input上添加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. 在render函數中使用searchedValue過濾items列表

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

5. 使用filteredItems數組創建多個tr

如您對帖子的評論所述， react-data-grid是一個不錯的選擇，但是您可以選擇最適合您的應用程序的