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

Posted 2023-02-22

【中文标题】如何按升序和降序对列进行排序？

【英文标题】：how sort columns in ascending and descending order?

【发布时间】：2020-11-09 02:46:18

【问题描述】：

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

 class Hello extends Component 
    constructor(props) 
        super(props)
    
        this.state = 
          search: '',
            Data:[
                
                    id: 1,
                    fullName: 'abc',
                    email:'[e-mail]',
                    
                ,
                
                    id: 2,
                    fullName: 'qps',
                    email:'[e-mail]',
                    
                ,
                
                    id: 3,
                    fullName: 'qwe',
                    email:'[e-mail]',
                    
                ,
             ]
        
    

         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

【问题讨论】：

您想按什么排序，电子邮件、id 还是全名？

【参考方案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>

【讨论】：

当我点击console.log() 中显示的点击列但表格无法排序时

抱歉，我在 setState 中有错字，DATA 应该是 Data。我会更新的

如果我想按名称对其进行排序，那么我需要在其中进行哪些更改？

我更新了答案和 CodeSandbox 以允许对所有列进行排序。

【参考方案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>

【讨论】：

这种方法对每个渲染进行排序，而不是仅在单击时进行排序，所以它可能不是最好的方法