日期排序react_使用React对表数据进行排序

通常，当拥有包含信息的表时，希望能够按升序或降序对表中的信息进行排序，尤其是在处理数字时。

先决条件

在我们继续之前，让我们看看我们将在本教程中使用的内容：

Foundation - 用于一般样式。我们为表格样式使用它，因为我们不希望被本教程中的样式分散注意力

ReactJS - 请注意，我不打算在本教程中解释React的基础知识。通过继续我假设你之前使用它(虽然我们要做的事情并不难😄)

数据 - 如上所述，我们将获得世界十大亿万富翁的名单加上他们的净资产

数据

我们将创建一个数组，其中包含亿万富翁名称及其净值十亿美元的对象：

const tableData = [

{

name: 'Amancio Ortega',

net_worth: 62.7

},

{

name: 'Bernard Arnault',

net_worth: 76

},

{

name: 'Bill Gates',

net_worth: 96.5

},

{

name: 'Carlos Sim Helu',

net_worth: 64

},

{

name: 'Jeff Bezos',

net_worth: 131

},

{

name: 'Larry Ellison',

net_worth: 58

},

{

name: 'Larry Page',

net_worth: 50.8

},

{

name: 'Mark Zuckerberg',

net_worth: 62.3

},

{

name: 'Michael Bloomberg',

net_worth: 55.5

},

{

name: 'Warren Buffet',

net_worth: 82.5

}

];

App组件

该组件将成为将在页面上生成的主要组件。它只有一些文本+

组件，它传递给我们上面声明的tableData。

const App = () => (

A list of top 10 richest billionaires.

Click on the icon next to "Net Worth" to see the sorting functionality

* Data gathered from{' '}

href='https://www.theweek.co.uk/people/57553/top-billionaires-who-richest-person-world'

target='_blank'>

theweek.co.uk

);

ReactDOM.render(, document.getElementById('app'));

Now that all of that is out of the way, we can focus on what's important 😉:

现在所有这一切都已经完成，我们可以专注于重要的事情😉：

表组件

它将是一个类组件，因为我们需要在其中使用状态，但首先让我们关注该render方法。我们将遍历在data，这来自父组件，我们要创建一个表行(tr数组中的每一个数据)。除此之外，我们还有一个基本的表结构(table > thead + tbody)。

class Table extends React.Component {

render() {

const { data } = this.props;

return (

data.length > 0 && (

NameNet Worth

{data.map(p => (

{p.name}${p.net_worth}b

))}

)

);

}

}

接下来，排序......

我们将有3种类型的排序：'default'，'up'(升序)， 'down'(下降)。这些类型将在一个按钮下更改，该按钮将具有FontAwesome图标，具体取决于当前活动的排序类型。让我们创建一个对象，它将为我们提供必要的信息：

const sortTypes = {

up: {

class: 'sort-up',

fn: (a, b) => a.net_worth - b.net_worth

},

down: {

class: 'sort-down',

fn: (a, b) => b.net_worth - a.net_worth

},

default: {

class: 'sort',

fn: (a, b) => a

}

};

如您所见，我们为每种类型的排序都有两个道具：

class - 这将由按钮中的图标使用，因为我们将看到当前活动的状态。

fn- 这将是function、我们在表中显示之前用于对数组中的项进行排序的方法。我们比较net_worth对象的属性。

到目前为止很棒！😄

我们还需要向Table组件添加一个currentSort状态，它将跟踪活动排序类型，最后，我们将有一个onSortChange方法，每次单击排序按钮时都会调用该方法，它将更改currentSort值。

很多单词😅，但让我们看看代码，我打赌你会明白😉：

class Table extends React.Component {

state = {

currentSort: 'default'

};

onSortChange = () => {

const { currentSort } = this.state;

let nextSort;

if (currentSort === 'down') nextSort = 'up';

else if (currentSort === 'up') nextSort = 'default';

else if (currentSort === 'default') nextSort = 'down';

this.setState({

currentSort: nextSort

});

};

render() {

const { data } = this.props;

const { currentSort } = this.state;

return (

data.length > 0 && (

Name

Net Worth

{[...data].sort(sortTypes[currentSort].fn).map(p => (

{p.name}${p.net_worth}b

))}

)

);

}

}

请注意，我们没有更改原始data数组，但是我们使用...(spread)运算符创建另一个数组，然后我们使用对象fn给定sortTypes的数组来相应地对数组进行排序。

结论

这就是它！现在您知道如何根据列中的值对表进行排序。恭喜！😄