反应虚拟化网格排序图标

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

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

对此的基本方法要求您在Grid 级别跟踪sort-by 和sort-direction。您似乎在列级别的组件状态中跟踪它，这将遇到您提到的问题。

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