反应虚拟化网格排序图标

Question

我已经在网格上实现了 react-virtualized，用户可以通过单击图标对值进行排序。我希望该图标与 react-bootstrap table 上的排序图标具有相同的行为。

目前，我的图标正在工作this。当我点击列字符串时，列号没有返回到圆圈图标。

这是我的排序组件：

class SortColumn extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      sortIcon: 'fa fa-circle',
      id: null,
    };
  }

  onClick() {
    const { columnId, sort } = this.props;
    const newSort = sort;
    newSort.id = columnId;

    if (sort.asc === true) {
      newSort.asc = false;
      this.setState({
        sortIcon: 'fa fa-chevron-down',
        id: columnId,
      });
    } else if (sort.asc === false) {
      newSort.asc = true;
      this.setState({
        sortIcon: 'fa fa-chevron-up',
        id: columnId,
      });
    }
    this.props.updateSort(newSort);
  }

  render() {
    return (
      <i
        onClick={this.onClick}
        styleName="columnSettingsSort"
        className={this.state.sortIcon} aria-hidden="true"
      />
    );
  }
}

你有什么想法吗？

Answer 1

听起来您希望 header 图标的工作方式类似于 react-virtualized Table headers work。

基本方法要求您同时跟踪 sort-by 和 sort-direction你的Grid。您似乎在列级别的组件状态中跟踪它，这将运行解决您提到的问题。

最简单的解决方法就是移动您的组件状态以跟踪当前排序标准从您的列组件进入您的updateSort回调。然后将排序条件作为 props 传递给每个列组件。这样当点击一个新的排序方向时，旧的列将被通知（通过新的道具）它不再活跃。

反应虚拟化网格排序图标

react virtualized grid sort icon

javascript

reactjs

sorting

react-virtualized