Javascript 如何使 ReactJS 中的表格可排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44375407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a table in ReactJS sortable?
提问by Midhun Mathew Sunny
I am building a simple app in ReactJS that works with a JSON array by calling a certain API. I am then populating the results of the array in a table. I now wanted to make the columns of the table sortable. Can someone help me with that. Here is my code.
我正在 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;
回答by Ted
Here's a quick example of how to do it, based on my comment:
根据我的评论，这是一个如何做到这一点的快速示例：
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;
