如何使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;