Используя шрифт потрясающий значок сортировки, который кликается - PullRequest
Новая
       18

Используя шрифт потрясающий значок сортировки, который кликается

0 голосов
/ 05 марта 2019

Я новичок в этом.Здесь я использую font-awsome sort icons. 

<th scope="col">Technology<i className="fa fa-fw fa-sort sort-icon" onClick={(event) => props.sortAscending(event,'technology')}></i></th>

Теперь я хочу отсортировать эти данные по asc или desc.Теперь, используя этот способ, я не могу получить погоду, пользователь щелкнул по возрастанию или убыванию.

Итак, я также проверил на event, но не повезло

Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 05 марта 2019

Давайте предположим, что ваш компонент называется SomeSortableTable, я бы посоветовал вам отредактировать его так, чтобы он выглядел примерно так: 

class SomeSortableTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = { sortingASC: true, }
        this.sortData = this.sortData.bind(this);
    }

    sortData(event) {
         const {props, state} = this;

         if (this.state.sortingASC) {
             props.sortAscending(event, 'technology');
         }
         else {
             props.sortDescending(event, 'technology');
         }
         this.setState({sortingASC: !state.sortingASC});
    }

    render() {
        return 
            <th scope="col">Technology<i className="some-icon" onClick={(event) => this.sortData(event)}></i></th>
    }
}

Строка this.setState({sortingASC: !state.sortingASC}); будет переключать порядок сортировки и сохранятьэто в памяти для дальнейшего использования.

Затем вы можете пойти дальше и добавить класс fa-flip-vertical к вашей иконке соответственно.

...