0

列の並べ替えが有効になっている反応仮想化テーブルがあります。私の計画は、filter icon列ヘッダーの隣に追加し、誰かがクリックしたときにMaterial-UI ポップオーバーを実行することです。

これが私がやったことです：私はheaderRendererを有効にしました

headerRenderer= {this.renderHeader}

私の headerRenderer はコンポーネントを返します

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

ColumnFilterContainer は次のとおりです。

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」がコンソールに表示されますが、テーブルも再ソートされます。どうすればやりたいことを達成できますか。それは実行可能ですか？

ありがとう

4

1 に答える 1

0

Tableソート可能なヘッダーのクリックをリッスンします。(つまり、コールバックを持つ にdisableSort属するものとしてタグ付けされていない列です。)Tablesort

あなたの場合、ソート可能なヘッダー内にソートをトリガーしてはならないものがある場合は、イベントがバブリングするのを防ぐだけで問題ありません。:)

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

于 2016-11-04T00:42:10.760 に答える