採用ASC /遞減和默認排序排序列

Question

我有我的表中多列，例如：

id | name | amount | description 

我想每一列進行排序 - 按升序第一次點擊，在第二上降序排列，第三次回到默認狀態，並重新開始。

默認值是按asc順序排列的id列。

所以，在減速機的默認狀態是：

sort: { 
    key: 'id', 
    desc: false 
} 

上單擊名稱列的下一個步驟將是：

sort: { 
    key: 'name', 
    desc: false 
} 

sort: { 
    key: 'name', 
    desc: true 
} 

sort: { 
    key: 'id', 
    desc: false 
} 

視圖使用列名作爲參數調用一個動作：

<td onClick={() => this.props.sort('name')}>Name</td> 
<td onClick={() => this.props.sort('amount')}>Amount</td> 

action應派遣這種key和desc的值，以便它符合我的模式：

export function sort(key) { 
    return dispatch => { 

    }; 
}; 

我該怎麼做？

Answer 1

你在這裏，簡單的說明在代碼示例中。 我只設置了2列，因爲我很懶，對不起。

小提琴：https://jsfiddle.net/u1wru0gb/1/

const data = [ 
    { id: 1, name: 'Bruce' }, 
    { id: 3, name: 'Martin' }, 
    { id: 2, name: 'Andrew' }, 
]; 

/** 
* Nothing interesting, just render... 
*/ 
function Table({ data, sortByKey }) { 
    const renderRow = ({ id, name }, idx) => (
     <tr key={idx}> 
      <td>{id}</td> 
      <td>{name}</td> 
     </tr> 
    ) 

    return (
     <table> 
      <tr> 
       <th onClick={sortByKey('id')}>ID</th> 
       <th onClick={sortByKey('name')}>Name</th> 
      </tr> 
      { data.map(renderRow) } 
     </table> 
    ); 
} 

class Container extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      sort: { 
       key: undefined, 
       // 0 - not ordering 
       // 1 - asc 
       // 2 - desc 
       order: 0, 
      }, 
     }; 

     this.sortByKey = this.sortByKey.bind(this); 
    } 

    sortedData() { 
     const { key, order } = this.state.sort; 

     // Only sort if key is provided & order != 0. 
     if (key && order) { 
      // Comparison function for "asc" sorting. 
      function compare(a, b) { 
       if (a[key] < b[key]) return -1; 
       if (a[key] > b[key]) return 1; 
       return 0; 
      } 

      // Attention! Sort mutates array, clone first. 
      return [...this.props.data].sort((a, b) => { 
       // Interesting part. Sort in "asc" order. Flip if want "desc" order! 
       return compare(a, b) * (order === 1 ? 1 : -1); 
      }); 
     } 

     // Return original data (order = 0) 
     return this.props.data; 
    } 

    sortByKey(key) { 
     return() => { 
      const sort = (this.state.sort.key === key) 
       // Key matches, update order 
       ? { key, order: (this.state.sort.order + 1) % 3 } 
       // Key differs, start with "asc" order 
       : { key, order: 1 }; 
      this.setState({ sort }); 
     } 
    } 

    render() { 
     return (
      <Table data={this.sortedData()} sortByKey={this.sortByKey} /> 
     ); 
    } 
} 

ReactDOM.render(
    <Container data={data} />, 
    document.getElementById('container') 
);