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相应地添加到图标中。

使用喜欢的字体可怕的排序图标

1 个答案: