React-Virtualizedで適切な列フィルタリングを行う方法 - アドバイスが必要ですか？

Question

私は列の並べ替えが有効な反応仮想化テーブルを持っています。私の計画は、列ヘッダーの隣にfilter iconを追加し、誰かがそれをクリックするとMaterial-UI popoverとすることです。だからここ

は私がやったことです： 私は

私がheaderRendererは次のように

renderHeader = (value) => { 
    // console.log(value) 
    return <ColumnFilterContainer label= {value.label} /> 
    } 

ColumnFilterContainerがあるコンポーネントを返しますがheaderRenderer

headerRenderer= {this.renderHeader}有効。

import React from 'react' 
import ContentClear from 'material-ui/svg-icons/content/clear' 
import FilterList from 'material-ui/svg-icons/content/filter-list' 

const ColumnFilterContainer = (props) => { 
    const {label} = props 
    return <span>{label} <a onClick={console.log('TEST')} ><FilterList /></a></span> 
} 

export default ColumnFilterContainer 

しかし、私はsvg-iconをクリックすると、 'TEST'を操作しますが、テーブルも削除されます。私は何をしたいのですか？それは可能ですか？

おかげ

Answer 1

Tableは、ソート可能なヘッダのクリックを待ち受けます。 （つまり、sortコールバックでTableに属しdisableSortとしてタグ付けされていない列である。）

あなたのケースでは、あなただけのイベントを防ぐsorting-トリガするべきではありませんあなたのソート可能なヘッダ内の何かを持っている場合バブリングからあなたは大丈夫でしょう。 :)

また、sort関数への次回の呼び出しを無視することもできますが、これはハッキリした解決策になると思います。