如何在ReactJS中對錶進行排序？

Question

我在ReactJS中構建了一個簡單的應用程序，它通過調用某個API與JSON數組一起工作。然後我在表中填充數組的結果。我現在想讓表格的列可以排序。有人可以幫助我。這是我的代碼。

class ParentComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
    } 

    componentDidMount() { 
    fetch("http://hostname:xxxx/yyyy/zzzz") 
     .then(function(response) { 
     return response.json(); 
     }) 
     .then(items => this.setState({ data: items })); 
    } 

    render() { 
    var newdata = this.state.data; 

    return (
     <table className="m-table"> 
     <thead> 
      <tr> 
      <th>AccountName</th> 
      <th>ContractValue</th> 
      </tr> 
     </thead> 
     <tbody> 
      {newdata.map(function(account, index) { 
      return (
       <tr key={index} data-item={account}> 
       <td data-title="Account">{account.accountname}</td> 
       <td data-title="Value">{account.negotiatedcontractvalue}</td> 
       </tr> 
      ); 
      })} 
     </tbody> 
     </table> 
    ); 
    } 
} 

export default ParentComponent; 

Answer 1

下面是如何做到這一點的基礎上，我的意見一個簡單的例子：

class ParentComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
    this.onSort = this.onSort.bind(this) 
    } 

    componentDidMount() { 
    fetch("http://hostname:xxxx/yyyy/zzzz") 
     .then(function(response) { 
     return response.json(); 
     }) 
     .then(items => this.setState({ data: items })); 
    } 

    onSort(event, sortKey){ 
    /* 
    assuming your data is something like 
    [ 
     {accountname:'foo', negotiatedcontractvalue:'bar'}, 
     {accountname:'monkey', negotiatedcontractvalue:'spank'}, 
     {accountname:'chicken', negotiatedcontractvalue:'dance'}, 
    ] 
    */ 
    const data = this.state.data; 
    data.sort((a,b) => a[sortKey].localeCompare(b[sortKey])) 
    this.setState({data}) 
    } 

    render() { 
    var newdata = this.state.data; 

    return (
     <table className="m-table"> 
     <thead> 
      <tr> 
      <th onClick={e => this.onSort(e, 'accountname')}>AccountName</th> 
      <th onClick={e => this.onSort(e, 'negotiatedcontractvalue')}>ContractValue</th> 
      </tr> 
     </thead> 
     <tbody> 
      {newdata.map(function(account, index) { 
      return (
       <tr key={index} data-item={account}> 
       <td data-title="Account">{account.accountname}</td> 
       <td data-title="Value">{account.negotiatedcontractvalue}</td> 
       </tr> 
      ); 
      })} 
     </tbody> 
     </table> 
    ); 
    } 
} 

export default ParentComponent;