使用喜歡的字體可怕的排序圖標

Question

我是新來的。 在這里，我使用了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 ，但沒有運氣

誰能幫我這個 ？

Answer 1

假設您的組件名為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類添加到圖標中。