無法將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)
   ...
}

您可能必須實現一種基於任務的列和行來查找任務的方法。 這將處理更改單元格文本的顏色