Question

我已经在反应虚拟化的网格上实现了用户在点击图标时对值进行排序的可能性。我希望图标的行为与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级别跟踪排序方式和排序方向。您似乎在一个列级别的组件状态中跟踪它，这将遇到您提到的问题。

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

反应虚拟网格排序图标

1 个答案: