Question

我有一个表，我想要创建它，以便用户可以按任何列对其进行排序。这是我的代码：-

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
import { BootstrapTable } from "react-bootstrap-table-next";

function Results(props) {
  var results = props.results;
  console.log(results);
  const [sresults, setSResults] = useState(results);
  const sorter = key =>
    sresults.sort((a, b) => {
      console.log("I am In THE SORTER");
      if (a[key] < b[key]) {
        console.log("RETURNING -1");
        return -1;
      }
      if (a[key] > b[key]) {
        console.log("RETURNING 1");
        return 1;
      }
      console.log("RETURNING 0");
      return 0;
    });
  if (!props.results) return "no data";
  if (!Array.isArray(props.results)) return "results are not array";
  function rows() {
    let result = sresults.map((result, index) => {
      return (
        <tr key={result.Book_Name}>
          <th scope="row">{index}</th>
          <td>{result.Book_Name}</td>
          <td>{result.Author}</td>
          <td>{result.S_no}</td>
          <td>{result.Series_Name}</td>
          <td>{result.Fiction_Non_fiction_Companion_Prequel}</td>
          <td>{result.Genre}</td>
          <td>{result.Kindle_Real}</td>
        </tr>
      );
    });
    return result;
  }
  function ssorter(key) {
    setSResults(sorter(key));
    console.log(sresults);
  }
  return (
    <Table hover bordered responsive>
      <thead>
        <tr>
          <th>{"S.no of the Books Found"}</th>
          <th>{"Book Name"}</th>
          <th>{"Author"}</th>
          <th>
            {"S.no"}
            <button onClick={() => ssorter("S_no")} />
          </th>
          <th>{"Series Name"}</th>
          <th>{"Fiction/Non fiction/Companion/Prequel"}</th>
          <th>{"Genre"}</th>
          <th>{"Kindle or Real"}</th>
        </tr>
      </thead>
      <tbody>{rows()}</tbody>
    </Table>
  );
}

export default Results;

我尝试了 react-bootstrap-table-next ，但是遇到一个致命错误，说它需要一个字符串。我遵循的有关react-bootstrap-table-next的教程是here。

先谢谢您了，如果您需要更多详细信息，请告诉我们。

编辑：状态更改。我已经证实了这一点。但是，该页面不会重新呈现。

Answer 1

为每个TH附加一个onClick函数。利用useState。将您的results置于此状态。然后在onClick上触发基于表列的排序。即

const sorter = key => results.sort((a, b) => {
  if(a[key] < b[key]) { return -1; }
  if(a[key] > b[key]) { return 1; }
  return 0;
})

使用onClick={() => setResults(sorter('Book_Name'))}只是一些粗略的代码，可以对其进行改进，但应该可以给您带来启发。现在，您当然需要在表格行标题（即箭头）上以某种方式显示此信息并实现排序方向（ASC，DESC）。

如何使React表按每一列排序？

1 个答案: