Reagieren virtualisierte Tabelle CellRenderer onClick-Methode Problem

Question

Ich benutze react-virtualisiert für Datentabelle und ich habe dieses Problem. Mein Ziel ist es, onClick Methode an die Zellen anhängen.

Ich habe renderColumns Funktion innerhalb <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> 

Und in renderColumns Funktion, ich nenne 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>; 

}

Dann in _cellRenderer, habe ich versucht _onCellClick auf onClick Ereignis zu nennen.

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

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

Wenn ich das tue, ich Typeerror bekommen: nicht Eigentum ‚_onCellClick‘ undefinierten Fehler lesen. Also sagt es mir, dass this in diesem Bereich nicht definiert ist? Was mache ich falsch?

Ich habe hier ein Beispiel erstellt. Vielen Dank.

Answer 1

Sie müssten _cellRenderer binden, wie Sie die beiden anderen Methoden gebunden haben, um es auf diese Weise zu verwenden. Du überträgst gerade eine Funktion als eine Stütze zum Tisch .... wenn es nicht gebunden wird, gibt es kein 'dieses', da Klassen immer im strengen Modus sind.