我正在使用react-virtualized for data table,我遇到了这个问题。我的目标是将onClick
方法附加到单元格。
我在renderColumns
<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
函数中,我调用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>;
}
然后在_cellRenderer
,我尝试在_onCellClick
事件上致电onClick
。
_onCellClick() {
alert('yey');
}
_cellRenderer({
cellData,
columnData,
columnIndex,
dataKey,
isScrolling,
rowData,
rowIndex,
}) {
return (
<div>
<a onClick={this._onCellClick}>{cellData}</a>
</div>
);
}
当我这样做时,我得到TypeError:无法读取属性&#39; _onCellClick&#39;未定义的错误。所以它告诉我this
在这个范围内未定义?我做错了什么?
我在这里创建了一个示例。谢谢。
答案 0 :(得分:4)
您必须绑定_cellRenderer,因为您已经绑定了其他两种方法以便以这种方式使用它。你只是将一个函数作为一个prop传递给表....如果没有绑定那么就没有'this',因为类总是处于严格模式。