无法将onClick函数应用于 <TableRowColumn> 与Material-UI交互

Question

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

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

我已经通过将测试的onClick的功能<button>内的<TableRowColumn>这DOES INFACT工作。 因此，这使我相信<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 });
  }

Answer 1

我相信您必须向表组件添加onCellClick函数，该函数将行索引和列索引作为参数。

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

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