我正在ReactJS中构建一个简单的应用程序,它通过调用某个API来使用JSON数组。然后我在表中填充数组的结果。我现在想让表的列可以排序。有人可以帮助我。这是我的代码。
.css
答案 0 :(得分:19)
根据我的评论,以下是一个如何操作的简单示例:
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;