时间戳

首页 > 解决方案 > 为数据表的所有列构造状态对象以进行排序：React JS

javascript - 为数据表的所有列构造状态对象以进行排序：React JS

问题描述

需要构造一个有助于维护字段名和排序类型（升序/降序）的状态对象。

我正在尝试通过获取列名和排序类型（asc 或 des）来实现在服务器端进行排序的排序。

我正在为数据表维护一个组件，其中我附加了一个单击处理程序，该处理程序基本上应该给出我单击的字段名称和排序类型。我可以对 fieldnam 进行硬编码，但是如何将每列映射到排序类型。

我只需要将字段名称和类型发送到后端，然后它会给我排序结果。我将如何使用 asc/desc 映射相应的列名

有人可以帮我弄这个吗？

沙盒：https ://codesandbox.io/s/misty-water-iutxl

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Child from "./Child";
interface IState {
  data: {}[];
  columns: {}[];
  selectedValues: {};
}

interface IProps {}

export default class App extends React.Component<IProps, IState> {

  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      columns: [],
    };
  }

  componentDidMount()
  {
    this.getColumnFilterValues();
    this.getData();
  }

  getData = () =>{
    let data = [
        { firstName: "Jack", status: "Submitted", age: "14" },
        { firstName: "Simon", status: "Pending", age: "15" },
        { firstName: "Pete", status: "Approved", age: "17" }
      ];
      this.setState({data},()=> this.getColumns());
  }

  getColumnFilterValues = () =>{
    let optionsForColumns = {
        firstName: [
          { Jack: "4", checked: false },
          { Simon: "5", checked: false },
          { Pete: "10", checked: false }
        ],
        status: [
          { Submitted: "5", checked: false },
          { Pending: "7", checked: false },
          { Approved: "15", checked: false }
        ]
      }
      this.setState({optionsForColumns});
  }

  sortHandler = (name) =>{
     //Sort Handler, here I have to pass the field name and type of sorting
  }

  getColumns = () =>{
    let columns = [
      {
        Header: () => (
          <div>
            <div style={{ position: "absolute", marginLeft: "10px" }}>
              <Child
                key="firstName"
                name="firstName"
                options={this.getValuesFromKey("firstName")}
                handleFilter={this.handleFilter}
              />
            </div>
            <span onClick={()=>this.sortHandler("firstName")}>First Name</span>
          </div>
        ),
        accessor: "firstName",
        sortable: false,
        show: true,
        displayValue: " First Name"
      },
      {
        Header: () => (
          <div>
            <div style={{ position: "absolute", marginLeft: "10px" }}>
              <Child
                key="status"
                name="status"
                options={this.getValuesFromKey("status")}
                handleFilter={this.handleFilter}
              />
            </div>
            <span onClick={()=>this.sortHandler("status")}>Status</span>
          </div>
        ),
        accessor: "status",
        sortable: false
      },
      {
        Header: () =>(
          <span onClick={this.sort}>Age</span>
        ),
        accessor: "age"
      }
    ];
    this.setState({ columns });
  }

  //Rendering the data table
  render() {
    const { data, columns } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={columns}
        />
      </div>
    );
  }
}

标签： javascriptreactjstypescriptecmascript-6setstate

解决方案

排序类型将只是当前排序类型的反转。因此，您需要跟踪每个列排序类型。之后，您可以执行以下操作；

// imagine sortingTypes are stored in the state like so:
state = {
  sortingTypes: {
    firstName: 'ASC',
    lastName: '',
  },
};


// in the onClick handler
sortHandler = (name) =>{
  //Sort Handler, here I have to pass the field name and type of sorting

  // Make a new sortingTypes object
  const sortingTypes = Object.keys(this.state.sortingTypes).reduce((obj, key) => {
    if (key === name) {
      obj[key] = sortingTypes[key] === 'ASC' ? 'DESC' : 'ASC';
    } else {
      obj[key] = '';
    }

    return obj;
  }, {});

  // calling this.getColumns() in the setState callback function is not recommended. 
  // The getColumns function is also calling setState and caused the component to update 
  // twice while that is not needed.
  this.setState({ sortingTypes }, () => this.getColumns());
}

编辑

在查看 react-table 之后，我意识到您不必自己管理状态。只需设置manualand属性onFetchData，您就可以准确地知道何时获取数据以及使用哪些排序选项；

<ReactTable
  data={data}
  columns={columns}
  defaultPageSize={10}
  loading={this.state.loading}
  className="-striped -highlight"
  onFetchData={(({ sorted }) => {
    // here you can fetch data with the table state like `sorting`.
    console.log(sorted && sorted[0] && sorted[0].id);
  })}
  manual
/>

有关更多信息，请参阅 React Table 文档中的服务器端数据章节。

推荐阅读