仮想化されたグリッドソートアイコンに反応します

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として渡します。このようにして新しいソート方向がクリックされると、古い列には（新しい小道具を介して）それがもはやアクティブではないことが通知されます。