Question

因此，我能够添加搜索输入，以过滤从此处的帮助数据库中接收到的数据，任何人都可以引导我了解如何过滤多个输入并显示搜索结果。我想按searchedValue，filterDay，filterCity进行筛选。.现在，该应用程序正在显示数据库中项目的整个列表，或者仅显示searchedValue输入中列出的内容。

如果有人可以向我发送文档，说明如何仅在搜索时从db获取数据，而不是每次刷新时都不断获取该数据。如果我的问题在这里不清楚，我感到抱歉。

谢谢。

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

我最近在项目中进行了多次搜索，您可以将其作为示例

   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

该组件从后端获取数据并基于多重搜索显示数据。希望获得帮助

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

1 个答案: