时间戳

首页 > 解决方案 > 如何在表格中进行搜索？

reactjs - 如何在表格中进行搜索？

问题描述

我想搜索所有分页和排序字段。那就是我想用searchkeyword调用handleChange。

那么我如何调用handleSearch 而不是从handleSearch 中调用handleChange？

import React from "react";
import { withRouter } from "react-router-dom";
import { Table, Button, Icon, Row, Col, Input } from "antd";

import axios from "axios";

const Search = Input.Search;

class App extends React.Component {
  state = {
    data: [],
    searchValue: "",
    loading: false,
    visible: false,
    pagination: {}
  };

  componentDidMount() {
    this.fetch();
  }

  handleTableChange = (pagination, filter, sorter, value) => {
    console.log(pagination, value, sorter, "Table Change");
    let sorterOrder = "";
    let sorterField = "";
    let searchVal = "";
    const pager = { ...this.state.pagination };
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    if (value) {
      console.log("inside if");
      searchVal = undefined;
    } else {
      console.log("inside else");
      searchVal = value;
    }
    if (sorter) {
      if (sorter.order === "ascend") {
        sorterOrder = "ASC";
      }
      if (sorter.order === "descend") {
        sorterOrder = "DESC";
      }
      sorterField = sorter.field;
    }
    this.fetch({
      page: pagination.current,
      sortField: sorterField,
      sortOrder: sorterOrder,
      ...filter,
      value: searchVal
    });
  };

  fetch = (params = {}) => {
    this.setState({ loading: true });
    axios.post("***/****", params).then(res => {
      const pagination = { ...this.state.pagination };
      let apiData = res.data.result;
      if (res.data.status === 1) {
        const objects = apiData.map(row => ({
          key: row.id,
          id: row.id,
          firstName: row.firstName,
          lastName: row.lastName,
          status: row.status,
          email: row.email
        }));
        console.log(res.data);
        pagination.total = res.data.count;
        this.setState({
          loading: false,
          data: objects,
          pagination
        });
      } else {
        console.log("Database status is not 1!");
      }
    });
  };

 

  handleSearch = value => {
    console.log("value", value);
    this.setState({
      searchValue: value
    });
    let searchkey = this.state.searchValue;
    const pagination = { ...this.state.pagination };
    const sorter = { ...this.state.sorter };
    console.log("search", value, pagination, sorter);
    this.handleTableChange({
      value
    });
    
  };


  render() {
    const columns = [
      {
        title: "First Name",
        dataIndex: "firstName",
        sorter: true
      },
      {
        title: "Email",
        dataIndex: "email",
        sorter: true
      }
    ];
    return (
      
          <div>
            
                    <Search
                      placeholder="input search text"
                      className="searchBut"
                      onSearch={value => this.handleSearch(value)}
                    />
                  
                    <Button
                      className="addBut"
                      style={{ marginTop: "0" }}
                      type="primary"
                      onClick={() => this.openForm()}
                    >
                      + Add Admin
                    </Button>
                  
          </div>
          <Table
            bordered
            columns={columns}
            dataSource={this.state.data}
            pagination={{ total: this.state.pagination.total, pageSize: 4 }}
            loading={this.state.loading}
            onChange={this.handleTableChange}
          />
        
    );
  }
}

export default withRouter(App);

在这里，当我在搜索字段中给出值时，它将调用带有请求有效负载的发布请求，如下所示：

{sortField: "", sortOrder: ""}
sortField: ""
sortOrder: ""

那么我该怎么做呢？

标签： reactjsantd

解决方案

我不确定你想在这里实现什么。

但是您始终可以过滤表的源数据。喜欢以下

<Table
     bordered
     columns={columns}
     dataSource={this.state.data.filter(data=> Object.keys(data).filter(key => data[key].includes(searchValue)).length > 0 ? true: false)}
     pagination={{ total: this.state.pagination.total, pageSize: 4 }}
     loading={this.state.loading}
     onChange={this.handleTableChange}
/>

让我知道它是否有帮助。

推荐阅读