使用单击的字体真棒排序图标答案

【问题标题】：Using the font awsome sort icon which is cliked使用单击的字体真棒排序图标
【发布时间】：2019-07-26 22:55:17
【问题描述】：

我是新手。这里我使用的是font-awsomesort 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，但没有运气

谁能帮我解决这个问题？

【问题讨论】：

你有 2 个按钮吗？一个用于 ASC，一个用于 DESC？
不，这是 fa-sort 的图标
那么就没有单独的 asc out desc 符号了。您可以尝试确定用户是否单击了<i> 元素的上部或下部。或者同时使用这两种字形。
那我必须在那里做 css 相关的事情吗？
你也可以将排序顺序存储在你的组件状态中

标签： javascript reactjs redux font-awesome

【解决方案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 类添加到您的图标中。

【讨论】：