如何点击“切换”数据？

Question

我想知道是否可以切换/ onClick数据并将其排序为例如从A到Z＆Z到A但不创建多个方法。

我有一些排序功能，但我希望这是一个切换。

当然我可以创建另一个函数并执行此操作..但我想知道我是否可以更清洁地完成它。

我有：

sortByTitle = () => {
    this.sortBy((a, b) => a.title.localeCompare(b.title));
    console.log('Sorted by title.');
};

但是，如何在不必创建其他功能的情况下恢复从B到A的排序？

我的代码：

import React, { Component } from 'react';

import { getMovies } from '../../services/fakeMovieService';

import TableHeader from './TableHeader';
import TableBody from './TableBody';

class Movies extends Component {
    state = {
        isSorted: false,
        movies: getMovies(),
        isDisabled: true,
    };

    sortBy = sortType => {
        this.setState({
            movies: this.state.movies.sort(sortType),
            isDisabled: false,
        });
    };

    // Display all movies but not the one selected.
    handleDelete = movie => {
        this.setState({
            movies: this.state.movies.filter(m => m._id !== movie._id),
            isDisabled: false,
        });

        console.log(`Movie ${movie.title} deleted.`);
    };

    // Sort by title.
    sortByTitle = () => {
        this.sortBy((a, b) => a.title.localeCompare(b.title));
        console.log('Sorted by title.');
    };

    // Sort by genre.
    sortByGenre = () => {
        this.sortBy((a, b) => a.genre.name.localeCompare(b.genre.name));
        console.log('Sorted by genre.');
    };

    // Sort by stock size.
    sortByStock = () => {
        this.sortBy((a, b) => a.numberInStock - b.numberInStock);
        console.log('Sorted by stock size.');
    };

    // Sort by rating score.
    sortByRating = () => {
        this.sortBy((a, b) => a.dailyRentalRate - b.dailyRentalRate);
        console.log('Sorted by rating.');
    };

    // Add class to the reset button based on the current filter state.
    resetButtonClass = () => {
        let btnClass = 'btn btn-sm btn-';
        btnClass += this.state.isDisabled ? 'warning' : 'primary';
        return btnClass;
    };

    // Reset sorted data.
    resetFilter = () => {
        this.setState({
            movies: [...getMovies()],
            isDisabled: true,
        });

        console.log('Reset sorted movies data.');
    };

    render() {
        const { length: count } = this.state.movies;

        // Check if there are movies available.
        if (count === 0)
            return (
                <React.Fragment>
                    <h4>There are no movies in the database.</h4>
                    <button
                        type="button"
                        onClick={this.resetFilter}
                        className="btn btn-primary btn-sm">
                        Reset
                    </button>
                </React.Fragment>
            );

        return (
            <React.Fragment>
                <h5>Showing {count} in the database.</h5>
                <table className="table table-hover table-striped table-dark">
                    <TableHeader
                        sortByTitle={this.sortByTitle}
                        sortByGenre={this.sortByGenre}
                        sortByStock={this.sortByStock}
                        sortByRating={this.sortByRating}
                        resetFilter={this.resetFilter}
                        resetButtonClass={this.resetButtonClass()}
                        isDisabled={this.state.isDisabled}
                    />

                    <TableBody
                        movies={this.state.movies}
                        handleDelete={this.handleDelete}
                    />
                </table>
            </React.Fragment>
        );
    }
}

export default Movies;

Answer 1

在javascript中，您可以使用sort（）按字母顺序（A-Z）对数组的值进行排序，如果您随后调用reverse（）方法，则可以按顺序排序（Z-A）

所以在伪代码中你可以有一个名为sortData的函数，它接受一个true / false值来命令inReverse（默认为false）

在您的州，您可以拥有跟踪当前订单的值

this.state{
    data:['Banana','Pineapple','Apple','Raspberry'],
    reverseOrder:false
}

sortData(reverseOrder = false)
{
    let sortedData = this.data.sort();

    if(reverseOrder)
       sortedData.reverse();
    this.setState(reverseOrder: !this.state.reverseOrder, data:sortedData)
}