2017-06-01 14 views
0

私はデータテーブルに反応仮想化を使用していますが、この問題が発生しています。私の目標は、細胞にonClickメソッドを添付することです。React仮想テーブルのcellRenderer onClickメソッドの問題

私は<Table>

<AutoSizer disableHeight> 
    {({ width }) => (
    <Table 
     width={800} 
     height={600} 
     headerHeight={25} 
     rowHeight={30} 
     rowCount={list.length} 
     rowGetter={({ index }) => list[index]} 
    > 
     {this._renderColumns(list, 100)} 

    </Table> 
)} 
</AutoSizer> 

そしてrenderColumns機能で内部のrenderColumns機能を持っているが、私は_cellRendererで次にthis._cellRenderer

_renderColumns(list, columnWidth) { 
// create new list for display 
return list && Object.keys(list[0]) 
    ? Object.keys(list[0]).map(column => (
     <Column 
     key={column} 
     width={columnWidth} 
     label={column} 
     dataKey={column} 
     cellRenderer={this._cellRenderer} 
     /> 
    )) 
    : <div className="loading">Loading…</div>; 

}

呼んで、私はonClickイベントに_onCellClickを呼び出そうとしました。プロパティ「_onCellClick」未定義のエラーのを読み取ることができません:

_onCellClick() { 
    alert('yey'); 
} 

_cellRenderer({ 
    cellData, 
    columnData, 
    columnIndex, 
    dataKey, 
    isScrolling, 
    rowData, 
    rowIndex, 
}) { 
    return (
    <div> 
     <a onClick={this._onCellClick}>{cellData}</a> 
    </div> 
); 
} 

私は、私は例外TypeErrorを得ることをやる

。したがって、 thisはこのスコープでは定義されていません。私は間違って何をしていますか?

ここでサンプルを作成しました。ありがとうございました。

Edit Z6Vo1g5zR

答えて

2

あなたはこの方法でそれを使用するために、他の2つのメソッドを結合したよう_cellRendererをバインドする必要があります。あなたはテーブルの小道具として関数を渡しています....もし束縛されていなければ、クラスは常に厳密なモードになっているので、 'this'はありません。

+0

それでした。 「これはいつも私を巡ります。どうもありがとうございます! – Duk

関連する問題