Javascript 反应虚拟化网格排序图标

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

目前，我的图标正在工作。当我单击列字符串时，列编号不会返回到圆圈图标

这是我的排序组件：

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"
      />
    );
  }
}

类SortColumn扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
此.state={
巫术：“法-法-法-圈”，
id:null，
};
}
onClick（）{
const{columnId，sort}=this.props；
const newSort=排序；
newSort.id=列id；
if（sort.asc==true）{
newSort.asc=false；
这是我的国家({
巫术：“法-法-V型下降”，
id:columnId，
});
}else if（sort.asc==false）{
newSort.asc=true；
这是我的国家({
巫术：“法法法雪佛龙向上”，
id:columnId，
});
}
this.props.updateSort（newSort）；
}
render（）{
返回(
);
}
}

---

您有什么想法吗？

听起来您希望标题图标的工作方式与此类似

基本方法要求您在

网格

级别跟踪排序依据和排序方向。您似乎正在跟踪组件状态下的列级别，该列将遇到您提到的问题

---

最简单的修复方法是将用于跟踪当前排序条件的组件状态从列组件移动到

updateSort

回调中。然后将排序条件作为道具传递给每个列组件。这样，当单击新的排序方向时，旧列将被通知（通过新的道具）它不再处于活动状态。

我不确定我是否理解了所有内容。这就是我所做的。我有3个组件，GridView渲染ColumnHeader，渲染SortColumn。我在GridView组件中输入了columnId和排序方向的状态。我已经将排序方向作为道具从GridView传递到SortColumn。在SortColumn的渲染中，我检查道具排序方向是上升还是下降，并显示相应的图标。现在，每次我点击SortColumn，它都会改变所有列的图标。我错过或误解了什么吗？听起来你很接近！您还需要按列本身存储排序。这样，您就知道只在当前按排序的列上显示向上/向下箭头。其他人应该显示他们不活动时显示的默认UI。有道理？