Попытка отсортировать данные в таблице реакции: Reactjs - PullRequest
Новая
       95

Попытка отсортировать данные в таблице реакции: Reactjs

1 голос
/ 10 июля 2020

Я пытаюсь отсортировать данные таблицы на основе поля, выбранного в раскрывающемся списке. В качестве альтернативы он должен выполнять сортировку по возрастанию или убыванию при нажатии на одно и то же поле. Я поддерживаю объект сортировки, который определяет, какое поле выбрано и каков порядок сортировки. Затем он отправляется на loda sh orderBy с полем и заказом. Не работает

Это то, что я пробовал. Может кто-нибудь сказать мне, что я делаю не так? Помощь очень ценится.

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>
      </>
    );
  }
}

1 Ответ

3 голосов
/ 10 июля 2020

Ваш код не работает так, как вы предполагали, потому что вы вызываете функцию handleSort только при изменении значения select (см. onChange вашего <Dropdown />).

What вам нужна функция, выполняемая при щелчке по опции.

Я искал документацию библиотеки, которую вы используете, и пришел к выводу, что вам нужно это . 

    <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>

Я пробовал его в вашем коде и он отлично работает!

Надеюсь, это поможет!

...