javascript - React 中对表进行升序/降序排序

Question

我正在使用这张表。到目前为止，当单击“日期”列时，它会按升序对表格进行排序。我希望能够再次单击它并使其恢复到降序排列。关于如何做有什么想法吗？

我知道只需在 => 之后切换 sortBy 中的 a 和 b 就会起到相反的作用。

class Orders extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [
          {orders: 'Vanilla', date: '03/15/1990'}, 
          {orders: 'Chocolate', date: '03/15/1989'}, 
        ],
      };

      this.sortBy.bind(this);
    }

    renderTableData() {
        return this.state.data.map((data, index) => {
            const{orders, date} = data
            return (
                <tr key={index}>
                   <td>{orders}</td> 
                   <td>{date}</td>
                </tr>
            )
        })
    } 

    sortBy(sortedKey) {
        const data = this.state.data;
        data.sort((a,b) => a[sortedKey].localeCompare(b[sortedKey]))
        this.setState({data})
    }

    render() {
      let newData = this.state.data;

      return (
        <table id="orders">

          <tr className="header">
            <th>Order</th>
            <th onClick={() => this.sortBy('date')}>Date</th>
          </tr>
          <tbody>
            {this.renderTableData()}
          </tbody>
        </table>
      );

    }
  }

  export default Orders;  

Answer 1

首先你应该保持状态的排序顺序:

  this.state = {
    sortingOrder:'DESC',
    data: [
      {orders: 'Vanilla', date: '03/15/1990'}, 
      {orders: 'Chocolate', date: '03/15/1989'}, 
    ],
  };

每次排序后，您应该在排序函数中更改它

sortBy(sortedKey) {
    const data = this.state.data;
    let sortingOrder=this.state.sortingOrder;

    if(sortingOrder==='ASC'){
      sortingOrder='DESC';
      data.sort((a,b) => b[sortedKey].localeCompare(a[sortedKey]))
    }else{
      sortingOrder='ASC';
      data.sort((a,b) => a[sortedKey].localeCompare(b[sortedKey]))
    }
    this.setState({data,sortingOrder});
}

为了按升序进行初始排序，您应该在 componentDidMount 方法上调用 sort by，请注意，我已将 ASC 更改为 DESC 作为初始值

 componentDidMount(){
           this.sortBy('date');
 }