当我单击reactjs中的按钮时，对表格进行升序和降序排序答案

【问题标题】：Sort the table ascending & descending order when i click on button in reactjs当我单击reactjs中的按钮时，对表格进行升序和降序排序
【发布时间】：2020-08-06 10:17:54
【问题描述】：

function TopicsTable(props) {
  return (
    <Table className="tablecss">

      <thead>
        <tr>
          <th>
             <button type="button">
              {props.getHeader[0]}
            </button>            
          </th>
          <th>
             <button type="button">
              {props.getHeader[1]}
            </button>            
          </th>
          <th>
             <button type="button">
              {props.getHeader[2]}
            </button>            
          </th>
          <th>
             <button type="button">
              {props.getHeader[3]}
            </button>            
          </th>
          <th>
             <button type="button">
              {props.getHeader[4]}
            </button>            
          </th>
          <th>
             <button type="button">
              {props.getHeader[5]}
            </button>            
          </th>
          </tr>
          </thead>

      <TableBody>
        {(props.getRowInfo)}
      </TableBody>
    </Table>
  );
}

 getRowsData = () => {
    var rowContents = this.state.data;

    return rowContents.map((rowContent, index) => {
      this.state.rowCount = this.state.rowCount + 1;
      return <React.Fragment><TableRow key={index} onClick={() => this.handleClick(index)}>{this.RenderCell(rowContent)}</TableRow>  {this.state.show && this.state.id === index ? <ChildComponent/>:""} </React.Fragment>
    })
  }




render() {
    return (
      <div className="Main">
        <header className="App-header">
          <h2 className="hdr"><i>Openion</i></h2>
        </header>
        <h4><Actionunit /></h4>
        <br />
        <TopicsTable getHeader={this.getHeader()} getRowInfo={this.getRowsData()}/>
      </div>
    );
  }

当我点击 reactjs 中的按钮时，按升序和降序对表格进行排序

【问题讨论】：

您可以发布您用于表格的数据格式吗？
"TableData": [ { "Tag": [ "Tag1", "Tag2" ], "Date": "03/02/2020", "Upvote": 2, "Downvote": 1、“评论”：4、“主题”：“你想在devcon上了解哪些主题？” }, { "Topic": "季度规划应该是什么样子？", "Tag": [ "Tag9" ], "Date": "03/12/2019", "Downvote": 2, "Comment": 12，“点赞”：30 }，

标签： reactjs

【解决方案1】：

首先，定义您的状态，以保存您当前的排序顺序：

  state = {
    sortedBy: '',
    sortDirection: 0
  }

然后，定义常量，以显示顺序方向（在您的类之外）：

const sortAsc = 1;
const sortDesc = -1;

然后，定义你的排序函数：

  sortTable = (columnName) => {
    let sortDirection = sortAsc;
    if (this.state.columnName === columnName) {
      if (this.state.sortDirection === sortAsc) {
        sortDirection = sortDesc;
      } 
    } 
    this.s.TableData.sort((x1, x2) =>  x1[columnName] < x2[columnName] ? -1 * sortDirection :  sortDirection )
    this.setState({
      columnName, sortDirection, data: this.state.data
    })
  };

然后，将此函数附加到每个表头：

 <th>
     <button type="button" onClick={() => props.sortTable(props.getHeader[0])> // <-- here you pass the header NAME (Upvote, Downvote, Comment and etc.)
      {props.getHeader[0]}
    </button>            
  </th>

请记住，这段代码是脱离上下文的，你可能会遇到命名、参数传递等方面的错误，一般来说它是一个基本的抽象。排序功能已经过测试并且可以正常工作。我希望你能设法将它集成到你的应用程序中。祝你好运！

【讨论】：

我已经管理了代码的所有内容，但是当我单击按钮 this.s.TableData.sort((x1, x2) => 时出现错误
正如我所说，这是一个抽象，因为我没有完整的代码，我已经将表保存在我的状态称为 S，所以我正在访问，使用 this.s.TableData。用您的命名修复它，它将开始工作;)
您能否分享一下状态代码，然后我会调查一下，或者我可以分享我的完整代码吗？
嗨@Enchew，我遇到了React JS 的一个问题。你能指导我如何处理这个-stackoverflow.com/questions/68359658/…

【解决方案2】：

我认为您正在寻找的要求是：

动态选择要排序的列
升序或降序排序
列数可以是动态的
行数可以是动态的

我的解决方案不使用<table>，但您可以轻松管理...

相关组件，用于获取标题、行...对数据进行排序和打印：

import React, { useState, useEffect } from "react";

export const MyTable = props => {
  const { header, data } = props;
  const [sortedRows, setSortedRows] = useState([]);
  const [headers, setHeaders] = useState([]);

  useEffect(() => {
    setSortedRows(data);
    setHeaders(header);
  }, []);

  const Sorter = fieldToSort => {
    let sortedArray = sortedRows;
    if(fieldToSort.dir === 'asc' ){

    sortedArray.sort((a, b) =>
      a[fieldToSort.label] > b[fieldToSort.label] ? 1 : b[fieldToSort.label] > a[fieldToSort.label] ? -1 : 0
    );
    } else {
          sortedArray.sort((a, b) =>
      a[fieldToSort.label] < b[fieldToSort.label] ? 1 : b[fieldToSort.label] < a[fieldToSort.label] ? -1 : 0
    );
    }
    (fieldToSort.dir === 'asc') ? fieldToSort.dir = 'dsc' : fieldToSort.dir = 'asc';
    let newHeaders = header;
    newHeaders[fieldToSort.dir] = fieldToSort.dir;

    setHeaders([...newHeaders]);
    setSortedRows([...sortedArray]);
  };

  return (
    <>
      <h2>Actual Table</h2>
      {headers.map((val, ind) => {
        return (
          <button type="button" key={ind} onClick={() => Sorter(val)}>
            {val.label} ({val.dir})
          </button>
        );
      })}
      {sortedRows.length > 0 ? (
        <ul>
          {sortedRows.map((val, ind) => {
            return (
              <li>
                {val.name} - {val.age}{" "}
              </li>
            );
          })}{" "}
        </ul>
      ) : (
        "no data available"
      )}
    </>
  );
};

完成working stackblitz here

【讨论】：