Javascript 如何在ReactJS sortable中创建表格？

我正在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;

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
}
componentDidMount（）{
取回（“http://hostname:xxxx/yyyy/zzzz")
.然后（功能（响应）{
返回response.json（）；
})
.then（items=>this.setState（{data:items}））；
}
render（）{
var newdata=this.state.data；
返回(
帐户名
合同价值
{newdata.map（函数（帐户、索引）{
返回(
{account.accountname}
{account.negotiatedcontractvalue}
);
})}
);
}
}
导出默认父组件；

根据我的评论，这里有一个快速的示例，说明如何操作：

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;

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
this.onSort=this.onSort.bind（this）
}
componentDidMount（）{
取回（“http://hostname:xxxx/yyyy/zzzz")
.然后（功能（响应）{
返回response.json（）；
})
.then（items=>this.setState（{data:items}））；
}
onSort（事件，排序键）{
/*
假设您的数据是
[
{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；
返回(
this.onSort（e，'accountname'）}>accountname
this.onSort（e，'negotiatedcontractvalue'）}>ContractValue
{newdata.map（函数（帐户、索引）{
返回(
{account.accountname}
{account.negotiatedcontractvalue}
);
})}
);
}
}
导出默认父组件；

我建议您使用

react bootstrap table

它默认提供包括排序在内的所有功能，选中此项：列排序示例：我也在使用自定义功能，例如（单击表行以提取rowID并执行某些操作）。所以我不能使用

react引导表

。我正在寻找要添加的代码。因为您是从数据呈现表，所以只需对数据排序并重新呈现即可。这有意义吗？我想从表头排序。我想在其他表中也使用该功能。但理想情况下，我想要的是同时进行升序和降序排序。当标题按升序排序时，单击标题后，它应按降序排序，反之亦然。@MidhunMathewSunny您应该能够从示例中了解如何做到这一点……给它一个机会，如果您无法使其正常工作，请发布另一个问题。我已按您的要求添加了另一个问题。我没有太多时间去探索。如果你能很快把答案贴出来就好了。[@PedroJR是的，因为它在类组件中使用本地状态。您可以通过使用状态挂钩或将其提取到您选择的存储中，使其在功能组件中工作。