Material UI Table内按钮无法点击且onClick渲染时自动触发如何解决

• 核心错误出在自定义ToggleButton组件的onClick绑定逻辑上：你直接给onClick传入了立即执行的函数调用表达式console.log("Clicked")，而不是可以在点击时触发的函数引用。组件渲染阶段会直接执行这行代码打印日志，执行完成后onClick拿到的是console.log的返回值undefined，相当于没有绑定点击回调，所以后续手动点击按钮自然没有反应。

把onClick的赋值内容改成函数引用或者箭头函数包裹的逻辑即可，修改后的ToggleButton代码如下：

<ThemeProvider theme={filtersTheme}>    
  <Button 
    variant="contained" 
    color={handleColor()} 
    onClick={() => console.log("Clicked")} 
  >
    {risk}
  </Button>
</ThemeProvider>

如果后续需要传参，直接在箭头函数内处理即可，示例：

// 比如需要传递risk、行列索引参数到回调
onClick={() => handleClick(risk, row_index, column_index)}

• 不要在onClick等事件属性内直接写带括号的函数调用（除非这个函数本身是返回另一个函数的高阶函数），否则都会在渲染阶段自动执行。
• 如果你后续把点击逻辑提到父组件，需要检查自定义的ToggleButton有没有把onClick props透传给内部的Button组件，保证props传递链路正常。

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