React.js如何使用多个过滤器和下拉输入

Question

So I was able to add a search input to filter the data I receive from the database from help here, Could anybody walk me through how I can go about filtering multiple inputs and displaying on the results that are searched. I want to filter by searchedValue, filterDay, filterCity.. Right now the app is displaying the entire list of items from the database or only what is listed in the searchedValue input.

Also if anybody could send me documentation on how to only get the data from db when searched instead of constantly getting that data on every refresh. I'm sorry if my question is unclear here.

Thanks.

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 {

    constructor() {
        super();

        this.state = {
            searchedValue: '',
            filterDay: '',
            filterCity: ''
        };
    }

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

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

    onSearch = e => {
        this.setState({ searchedValue: e.target.value });
    }

    onFilterDay = e => {
        this.setState({ filterDay: e.target.value });
    }

    onFilterCity = e => {
        this.setState({ filterCity: e.target.value });
    }

    render() {
        const { items } = this.props.item;
        const filteredNames = items.filter((item) => item.MeetingName.includes(this.state.searchedValue));

        return(
            <div>
                <Input type="text" placeholder="search" onChange={this.onSearch} value={this.state.searchedValue} />
                <Input type="select" name="day" onChange={this.onFilterDay} value={this.state.filterDay}>
                    <option>SUNDAY</option><option>MONDAY</option><option>TUESDAY</option>
                </Input>
                <Input type="select" name="day" onChange={this.onFilterCity} value={this.state.filterCity}>
                    <option>DANA POINT</option><option>LAGUNA BEACH</option><option>SAN CLEMENTE</option>
                </Input>
                <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>
                        <tbody>
                        {filteredNames.map(({ _id, Day, Time, MeetingName, Address, City, Zip }) => (
                            <tr key={_id}>
                                <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

I recently did the multi search in my project you can consider this as an example

   searchBy = () => {
   let searchBy = [];
   {
   searchBy.push(
    ...this.state.originalResponse.filter(item => {
      let searchText =
        this.state.searchText != ""
          ? item.question
              .toLowerCase()
              .search(this.state.searchText.toLowerCase()) !== -1
          : true;
      let category =
        this.state.category != ""
          ? item.type.toLowerCase() === this.state.category.toLowerCase()
          : true;
      let level =
        this.state.level != ""
          ? item.difficulty.toLowerCase() === this.state.level.toLowerCase()
          : true;

      return searchText && category && level;
    })
  );
  }
  console.table(searchBy, ["id", "question", "difficulty", "type"]);
  this.setState({ userArray: searchBy });
  };

https://github.com/AdnanShah/Sawal-Jawab-Game-App/blob/frontend/src/components/QuestionsList/index.js

This component fetch data from back-end and display the data based on the multiple search.Hope this help