无法在 React with Material-UI 中将 onClick 函数应用于 <TableRowColumn>答案

【问题标题】：Can't apply an onClick function to <TableRowColumn> in React with Material-UI无法在 React with Material-UI 中将 onClick 函数应用于 <TableRowColumn>
【发布时间】：2018-06-25 09:04:50
【问题描述】：

我以前有这样的功能，我可以单击table 的单元格，它会在红色和绿色之间切换文本的颜色。

我已经在 React 应用程序中实现了 Material-UI，将 <td> 标签替换为 <TableRowColumn> 标签，现在我发现 onClick 事件不再起作用。

我已经通过在<TableRowColumn> 中放置<button> 来测试onClick 的功能，这确实确实有效。所以这让我相信<TableRowColumn> 元素没有 onClick 的选项...

工作

return (
        <tdstyle={taskStyle} onClick={this.props.toggleTask.bind(this, task)}>
            {task} <button >Click</button>
        </td>
    )

损坏（从按钮调用时颜色更改功能起作用）

return (
        <TableRowColumn style={taskStyle} onClick={() => this.help()}>
            {task} <button onClick={this.props.toggleTask.bind(this, task)} >Click</button>
        </TableRowColumn>
    )

功能

toggleTask(task) {
    const foundToDo = _.find(this.state.todos, todo => todo.task === task);
    foundToDo.isCompleted = !foundToDo.isCompleted;
    this.setState({ todos: this.state.todos });
  }

【问题讨论】：

您使用的是哪个材质-UI 版本？
最新版本：0.20.0 - 我今天确实使用了 Material-UI。
我猜你没有使用 material-UI v1 如果是这样，那么在早期版本中 TableRowColumn 没有 onClick 道具。由于您最近开始使用 material-UI，所以我建议您使用最新版本，即 materia-ui@next 表格组件在具有高级功能的最新版本中完全改变。最新版本中引入了许多新功能。
哦！我看到了该网站并按照他们的说明进行下载 - 看起来 v1 即将推出，但还没有。我刚刚做了一个 npm install of material-ui
您可以使用 npm install --save material-ui@next 安装最新版本。 V1版本有很多变化，如果你现在使用旧版本，那么将来如果你想升级到v1，那么你将不得不做很多变化，升级到v1时你会遇到很多困难。所以从现在开始使用 v1。同样，它非常强大，V1 中的功能也很多。

标签： javascript html reactjs material-ui

【解决方案1】：

我相信您必须在 Table 组件中添加一个 onCellClick 函数，该函数将行和列索引作为参数。

handleCellClick(row, column, e) {
if(row == 0)
   ...
if(column == 0)
   ...
}

您可能必须实现一种方法来根据任务的列和行来查找任务。这将处理更改单元格文本的颜色

【讨论】：

我之前看到了 onCellClick 标记，但不知道传入行、列等。我想我可以尝试将其用于类似：if(column == 0) { blahh } else {返回}