如何按升序和降序对列进行排序？

Question

我使用对象数组创建了表，现在我不明白我们如何通过单击 reactjs 中的列名按升序和降序对表进行排序。我在stackoverflow上尝试了很多概念，但它似乎对这个没有用。这是一个非常愚蠢的问题，但我已经停止了很多天。

 class Hello extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
          search: '',
            Data:[
                {
                    id: 1,
                    fullName: 'abc',
                    email:'example@gmail.com',
                    
                },
                {
                    id: 2,
                    fullName: 'qps',
                    email:'qps@gmail.com',
                    
                },
                {
                    id: 3,
                    fullName: 'qwe',
                    email:'qwe@gmail.com',
                    
                },
             ]
        }
    }

         function Sort(){
//what need to write here;
}

        render() {
            return (
                
                <div>
                    <h1>welcome to React</h1>
                    <table className="table table-hover table-dark">
                    
                    <tbody>
                        <tr>
                            <th onChange={this.Sort.bind(this)}>ID</th>
                            <th>Full Name</th>
                            <th>Email</th>
                        </tr>
                    {
                       this.state.Data.map((item,index)=>(
                        <tr key={item.id}>
                            
                            <td >{item.id}</td>
                        
                            <td >{item.fullName}</td>
                            <td>{item.email}</td>
                        </tr>
                    ))
                    }
                    </tbody>
                    </table>
    
                </div>
            )
        }
    }
    export default Hello

Answer 1

• 您需要将onChange 处理程序切换为onClick。
• 添加一些状态来存储最后的排序方向；
• 使用数组sort() 方法，但注意不要改变您的状态。

  this.state = {
    order: 'ASC'
  ...

function sort() {
  let sortedList = [...this.state.Data];
  let newOrder = this.state.order === 'ASC' ? 'DESC' : 'ASC';
  if (newOrder === 'ASC') {
    sortedList.sort((a, b) => a.id - b.id)
  } else {
    sortedList.sort((a, b) => b.id - a.id)
  }
  
  this.setState({ Data: sortedList, order: newOrder });
}

为了能够对任何列进行排序，我将进行以下更改：

  function sort(column) {
    const sortedList = [...this.state.Data];
    const newOrder = this.state.order === "ASC" ? "DESC" : "ASC";
    const sortValue = (v1, v2) => {
      if (column === 'id') return v1.id - v2.id;
      return (v1[column] ?? '')
        .toLowerCase()
        .localeCompare((v2[column] ?? '').toLowerCase())
    }
    if (newOrder === "ASC") {
      sortedList.sort((a, b) => sortValue(a, b));
    } else {
      sortedList.sort((a, b) => sortValue(b, a));
    }
    this.setState({ Data: sortedList, order: newOrder });
  }

并为每个列标题添加适当的onClick 处理程序。

<th onClick={() => this.sort('id')}>ID</th>
<th onClick={() => this.sort('fullName')}>Full Name</th>
<th onClick={() => this.sort('email')}>Email</th>

Answer 2

为升序或降序添加一个状态变量，然后在你的排序函数中：

function Sort(a,b){
    if(this.state.ascending){
        return a.id - b.id
    {
    return b.id - a.id
}

然后在你的渲染函数中在地图前添加排序方法：

const Data = [...this.state.Data]
//...

      Data.sort((a,b)=>this.Sort(a,b)).map((item,index)=>(
        <tr key={item.id}>           
          <td >{item.id}</td>        
          <td >{item.fullName}</td>
          <td>{item.email}</td>
        </tr>
              
               

最后改变你的 onClick 只改变升/降的状态：

 <th onClick={()=>this.setState({ascending: !this.state.ascending)}>ID</th>