React Virtualized Table cellRenderer onClick 方法问题答案

【问题标题】：React Virtualized Table cellRenderer onClick method issueReact Virtualized Table cellRenderer onClick 方法问题
【发布时间】：2017-06-01 00:38:53
【问题描述】：

我正在为数据表使用 react-virtualized，我遇到了这个问题。我的目标是将onClick 方法附加到单元格。

我在<Table> 中有renderColumns 函数

<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 中，我尝试在onClick 事件上调用_onCellClick。

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

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

当我这样做时，我得到 TypeError: Cannot read property '_onCellClick' of undefined error。所以它告诉我this 在这个范围内是未定义的？我做错了什么？

我在这里创建了一个示例。谢谢。

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

您必须绑定 _cellRenderer，因为您已经绑定了其他两种方法才能以这种方式使用它。您只是将一个函数作为道具传递给表......如果它没有绑定，则不会有“this”，因为类始终处于严格模式。

【讨论】：

就是这样。 this 总是绊倒我。非常感谢！