React结合Material-UI中无法为<TableRowColumn>绑定onClick事件

你猜的没错，Material-UI的TableRowColumn组件本身并不直接支持onClick属性，这就是为什么绑定在它上面的点击事件没反应，但内部button的onClick能正常触发的原因——button是原生DOM元素，事件可直接生效，而TableRowColumn作为封装组件，默认没有把onClick属性透传给底层的DOM节点。

下面给你几个可行的解决方案，结合你的代码示例调整：

方案1：用div包裹内容并绑定onClick #

给TableRowColumn内部套一个div，把点击事件绑定在这个div上，同时设置div样式占满整个单元格，这样点击单元格任意区域都能触发事件：

return (
  <TableRowColumn style={taskStyle}>
    <div 
      onClick={() => this.help()} 
      style={{ width: '100%', height: '100%', cursor: 'pointer' }}
    >
      {task}
      <button onClick={this.props.toggleTask.bind(this, task)}>Click</button>
    </div>
  </TableRowColumn>
);

添加cursor: 'pointer'是为了让鼠标移上去显示点击提示，提升交互体验。

方案2：指定TableRowColumn的component属性为原生td #

如果你的Material-UI版本支持，可以通过component属性让TableRowColumn渲染成原生<td>元素，这样就能直接绑定onClick了：

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

这个方案更简洁，相当于让封装组件回归原生td的特性，事件自然就能生效。

额外优化：你的toggleTask函数建议 #

另外提一句，你当前的toggleTask直接修改了state里的对象（foundToDo.isCompleted = !foundToDo.isCompleted），这不符合React状态不可变的规范，可能导致状态更新不及时。建议改成不可变的更新方式：

toggleTask(task) {
  const updatedTodos = this.state.todos.map(todo => {
    if (todo.task === task) {
      return { ...todo, isCompleted: !todo.isCompleted };
    }
    return todo;
  });
  this.setState({ todos: updatedTodos });
}

通过创建新数组和新对象更新状态，能保证React正确检测到变化并重新渲染组件。

内容的提问来源于stack exchange，提问作者physicsboy