Question

现在我有一个表格，其中包含github api中的一些数据。在表格中，您可以单击星标题，然后将列表从0到*排序。我的功能适用于一列。但是，如何对不同的列反复使用此功能？

我的表格标题：

<th>Name</th>
<th onClick={this.sortList}>Stars</th>

{* This should update value forks_count *}
<th onClick={this.sortList}>Forks</th>

我的功能：

我做的是获取我的数组并根据stargazers_count对其进行排序。这有效，但是当我想对我的福克斯计数时，stargazers_count应该是forks_count。这可能吗？

sortList = () => {
    const items = this.props.repos;

    items.sort(function (a, b) {
        //stargazers_count should be forks_count when I click on forks heading
        return a.stargazers_count - b.stargazers_count;
    });

    this.setState({
        repos: items
    })

};

Answer 1

将一组对象作为配置：

fields = [{ name: 'Stars', field: 'stargazers_count'}, { name: 'Forks', field: 'forks_count' }]

现在，让您的th在fields.map函数中呈现，就像这样

fields.map(f => <th onClick={() => this.sortList(f.field)}> {f.name} </th>)

这将根据您的配置数组呈现所有th。

现在更改您的sortList功能，使其将字段作为参数。

sortList = (field) => {
...

items.sort(function (a, b) {
    return a[field] - b[field];
});

...

};

Answer 2

关闭：

<th>Name</th>
<th onClick={this.sortListBy("stargazers_count")}>Stars</th>

{* This should update value forks_count *}
<th onClick={this.sortListBy("forks_count")}>Forks</th>



sortListBy = (prop) => () => {
    const items = this.props.repos;

    items.sort(function (a, b) { 
        return a[prop] - b[prop];
    });

    this.setState({
        repos: items
    })

};

Answer 3

这应该可以使用bind并将列名作为参数，如下所示：

<th>Name</th>
<th onClick={this.sortList.bind(this, 'stargazers_count')}>Stars</th>

{* This should update value forks_count *}
<th onClick={this.sortList.bind(this, 'forks_count')}>Forks</th>

sortList = (column) => {
    const items = this.props.repos;

    items.sort(function (a, b) {
        //stargazers_count should be forks_count when I click on forks heading
        return a[column] - b[column];
    });

    this.setState({
        repos: items
    })

};

在反应中多次使用排序功能

3 个答案: