浅谈React实现table根据不同字段升降序排序_react 数组根据索引排序且不包含某个对象元素的排序-优快云博客

本文链接：https://blog.youkuaiyun.com/zhouziyu2011/article/details/71189613

本文探讨了如何在React中利用JavaScript对象数组的sort方法，针对table的特定字段实现升序和降序排序功能。详细步骤和示例代码参考链接：http://blog.youkuaiyun.com/zhouziyu2011/article/details/71189124。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tableBox.html：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="tableBox.css">
		<script src="build/react.js"></script>
		<script src="build/react-dom.js"></script>
		<script src="build/browser.min.js"></script>
	</head>
	<body>
		<div id="tableBox"></div>
		<script type="text/babel" src="tableBox.jsx"></script>
	</body>
</html>

tableBox.jsx：

var data = [
	{name: "Bruce", age: 23, id: 16, score: 80},
	{name: "Alice", age: 24, id: 12, score: 90},
	{name: "David", age: 21, id: 11, score: 70},
	{name: "Cindy", age: 22, id: 10, score: 100},
];
var flag = {
	name: true,
	age: true,
	id: true,
	score: true
};
function upSort(propertyName) {
	if ((typeof data[0][propertyName]) != "number") {
		return function(object1, object2) {
			var value1 = object1[propertyName];
			var value2 = object2[propertyName];
			return value1.localeCompare(value2);
		}
	}
	else {
		return function(object1, object2) {
			var value1 = object1[propertyName];
			var value2 = object2[propertyName];
			return value1 - value2;
		}
	}
} 
function downSort(propertyName) {
	if ((typeof data[0][propertyName]) != "number") {
		return function(object1, object2) {
			var value1 = object1[propertyName];
			var value2 = object2[propertyName];
			return value2.localeCompare(value1);
		}
	}
	else {
		return function(object1, object2) {
			var value1 = object1[propertyName];
			var value2 = object2[propertyName];
			return value2 - value1;
		}
	}
} 
var TableBox = React.createClass({
	getInitialState: function() {
		return {data:this.props.data};
	},
	sort: function(e) {
		var prop = e.target.innerHTML;
		if (flag[prop] == true)
			this.state.data.sort(upSort(prop));
		else
			this.state.data.sort(downSort(prop));
		flag[prop] = !flag[prop];
		this.setState({data:this.state.data});
	},
	render: function() {
		return (
			<table>
				<thead>
					<tr>
						<th onClick={this.sort}>name</th>
						<th onClick={this.sort}>age</th>
						<th onClick={this.sort}>id</th>
						<th onClick={this.sort}>score</th>
					</tr>
				</thead>
				<tbody>
					{
						this.state.data.map(function(item, index) {
							return (
								<tr key={index}>
									<td>{item.name}</td>
									<td>{item.age}</td>
									<td>{item.id}</td>
									<td>{item.score}</td>
								</tr>
							);
						})
					}
				</tbody>
			</table>
		);
	}
})
ReactDOM.render(
	<TableBox data={data}/>, 
	document.getElementById("tableBox")
);

JavaScript对象数组根据某属性sort升降序排序的具体实现请见：http://blog.youkuaiyun.com/zhouziyu2011/article/details/71189124