时间戳

首页 > 解决方案 > 尝试对反应表中的数据进行排序：Reactjs

javascript - 尝试对反应表中的数据进行排序：Reactjs

问题描述

我正在尝试根据从下拉列表中选择的字段对表数据进行排序。每当单击相同的字段时，它应该交替地在升序或降序之间排序。我正在维护一个排序对象，该对象决定选择哪个字段以及排序顺序是什么。然后将其orderBy与字段和订单一起发送到 lodash。这没用

这是我尝试过的。有人可以告诉我我做错了什么。非常感谢您的帮助。

https://codesandbox.io/s/simple-react-class-component-1n3f9?file=/src/index.js:0-3000

import React from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import { Dropdown } from "semantic-ui-react";
import moment from "moment";
import orderby from "lodash.orderby";

const options = [
  { key: 1, text: "Name", value: "name", icon: "sort" },
  { key: 2, text: "Time", value: "time", icon: "sort" },
  { key: 3, text: "Type", value: "type", icon: "sort" }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      original: [],
      sortObject: { field: "", order: "" }
    };
  }

  componentDidMount() {
    let list = [
      {
        name: "namev1",
        time: 1583295463213,
        type: 14
      },
      {
        name: "namea2",
        time: 1582885423296,
        type: 15
      },
      {
        name: "namea3",
        time: 1581295463213,
        type: 16
      }
    ];
    this.setState({ list, original: list });
  }

  handleSearch = e => {
    let searchInput = e.target.value;
    let filteredData = this.state.original.filter(value => {
      return (
        value.name.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.type.toString().includes(searchInput.toString())
      );
    });
    this.setState({ list: filteredData });
  };

  formSortObject = fieldName => {
    let { sortObject } = this.state;
    if (!sortObject.field || sortObject.field !== fieldName) {
      Object.assign(sortObject, {
        field: fieldName,
        order: "asc"
      });
      return sortObject;
    } else if (sortObject.field === fieldName) {
      Object.assign(sortObject, {
        ...sortObject,
        order: sortObject.order === "desc" ? "asc" : "desc"
      });
      return sortObject;
    }
  };

  handleSort = (e, data) => {
    let dropdDownValue = data.value;
    let currentField = this.formSortObject(dropdDownValue);
    let result = orderby(
      this.state.list,
      currentField.field,
      currentField.order
    );
    this.setState({ list: result });
  };

  render() {
    return (
      <>
        Search: <input type="text" onChange={this.handleSearch} />
        <Dropdown text="Sort By" options={options} onChange={this.handleSort} />
        <h1>List</h1>
        <table>
          <tbody>
            {this.state.list.map((item, index) => (
              <tr key={index}>
                <td>
                  <p>{index + 1}</p>
                </td>
                <td>
                  <p>{item.name}</p>
                </td>
                <td>
                  <p>{moment().diff(item.time, "days")}</p>
                </td>
                <td>
                  <p>{item.type}</p>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </>
    );
  }
}

标签： javascriptreactjsecmascript-6lodashecmascript-5

解决方案

您的代码没有像您预期的那样工作，因为您handleSort仅在 select 的值更改时才调用该函数（请参阅onChange您的<Dropdown />）。

您需要的是单击选项时执行的功能。

我搜索了您正在使用的库的文档，得出的结论是您需要的是这个。

    <Dropdown text='Sort By'>
        <Dropdown.Menu>
          {options.map(item=>
            <Dropdown.Item text={item.text} value={item.value} icon={item.icon} key={item.key} onClick={this.handleSort}/>
          )}
        </Dropdown.Menu>
    </Dropdown>

我在你的代码盒中试过了，效果很好！

我希望它有帮助！

推荐阅读