要按照过滤器对数据进行排序,可以使用React JS的Array.sort()方法。以下是一个示例代码:
import React, { useState } from 'react';
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 20 },
{ id: 4, name: 'Alice', age: 35 },
];
const App = () => {
const [sortBy, setSortBy] = useState('');
const handleSort = (event) => {
setSortBy(event.target.value);
};
const sortedData = [...data].sort((a, b) => {
if (sortBy === 'name') {
return a.name.localeCompare(b.name);
} else if (sortBy === 'age') {
return a.age - b.age;
}
return 0;
});
return (
{sortedData.map((item) => (
-
{item.name} - {item.age} years old
))}
);
};
export default App;
在上述代码中,我们首先定义了一个包含数据的数组data
。然后,我们使用React的useState
钩子来定义一个名为sortBy
的状态变量,用于保存当前选择的排序方式。
接下来,我们定义了一个handleSort
函数,用于更新sortBy
的值。该函数将通过event.target.value
获取选择的排序方式,并将其设置为sortBy
的新值。
然后,我们使用数组的sort()
方法对data
数组进行排序。排序的方式根据sortBy
的值决定。如果sortBy
是name
,我们使用localeCompare()
方法对name
属性进行排序;如果sortBy
是age
,我们使用简单的减法操作对age
属性进行排序。
最后,我们在渲染部分使用了一个select
元素来选择排序方式,通过onChange
事件监听选择的改变。我们使用sortedData
数组来渲染排序后的结果。
这就是一个按照过滤器排序数据的React JS解决方法。
上一篇:按照国家选择每年的SQL