使用 asc/desc 和默认排序对列进行排序答案

【问题标题】：Sorting columns using asc/desc and default ordering使用 asc/desc 和默认排序对列进行排序
【发布时间】：2016-12-29 23:20:05
【问题描述】：

我的表中有多个列，例如：

id | name | amount | description

我想对每一列进行排序 - 第一次单击时按升序排列，第二次按降序排列，第三次返回默认值，然后从头再来。

默认是按升序排列的id 列。

所以，reducer 中的默认状态是：

sort: {
    key: 'id',
    desc: false
}

单击名称列的下一步是：

sort: {
    key: 'name',
    desc: false
}

sort: {
    key: 'name',
    desc: true
}

sort: {
    key: 'id',
    desc: false
}

视图使用列名作为参数调用操作：

<td onClick={() => this.props.sort('name')}>Name</td>
<td onClick={() => this.props.sort('amount')}>Amount</td>

一个动作应该调度这样的key 和desc 值，以便它匹配我的模式：

export function sort(key) {
    return dispatch => {

    };
};

我该怎么做？

【问题讨论】：

标签： sorting reactjs redux

【解决方案1】：

给你，代码示例中的简要说明。我只设置了 2 列，因为我很懒，抱歉。

小提琴：https://jsfiddle.net/u1wru0gb/1/

const data = [
    { id: 1, name: 'Bruce' },
    { id: 3, name: 'Martin' },
    { id: 2, name: 'Andrew' },
];

/**
 * Nothing interesting, just render...
 */
function Table({ data, sortByKey }) { 
    const renderRow = ({ id, name }, idx) => (
        <tr key={idx}>
            <td>{id}</td>
            <td>{name}</td>
        </tr>
    )

    return (
        <table>
            <tr>
                <th onClick={sortByKey('id')}>ID</th>
                <th onClick={sortByKey('name')}>Name</th>
            </tr>
            { data.map(renderRow) }
        </table>
    );
}

class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sort: {
                key: undefined,
                // 0 - not ordering
                // 1 - asc
                // 2 - desc
                order: 0,
            },
        };

        this.sortByKey = this.sortByKey.bind(this);
    }

    sortedData() {
        const { key, order } = this.state.sort;

        // Only sort if key is provided & order != 0.
        if (key && order) {
            // Comparison function for "asc" sorting.
            function compare(a, b) {
                if (a[key] < b[key]) return -1;
                if (a[key] > b[key]) return 1;
                return 0;
            }

            // Attention! Sort mutates array, clone first.
            return [...this.props.data].sort((a, b) => {
                // Interesting part. Sort in "asc" order. Flip if want "desc" order!
                return compare(a, b) * (order === 1 ? 1 : -1);
            });
        }

        // Return original data (order = 0)
        return this.props.data;
    }

    sortByKey(key) {
        return () => {
            const sort = (this.state.sort.key === key)
                // Key matches, update order
                ? { key, order: (this.state.sort.order + 1) % 3 }
                // Key differs, start with "asc" order
                : { key, order: 1 };
            this.setState({ sort });
        }
    }

    render() {
        return (
            <Table data={this.sortedData()} sortByKey={this.sortByKey} />
        );
    }
}

ReactDOM.render(
    <Container data={data} />,
    document.getElementById('container')
);

【讨论】：