如何禁用Material React Table中指定列的行点击事件？

要阻止点击Switch时触发行的跳转事件，核心是利用事件冒泡阻止机制，具体可以通过以下两种方式实现：

方法一：直接在Switch组件上添加阻止冒泡的事件 #

在Switch的onClick事件中调用event.stopPropagation()，拦截事件向上传递到行元素：

<Tooltip
  title={isActive === 'ACTIVE' ? 'Active' : 'Inactive'}
  placement="left-end"
  arrow
  TransitionComponent={Zoom}
>
  <Switch
    checked={checked}
    onChange={handleStatusChange}
    onClick={(e) => e.stopPropagation()} // 新增此行阻止事件冒泡
    inputProps={{ 'aria-label': 'controlled' }}
  />
</Tooltip>

方法二：在状态切换函数中阻止冒泡 #

如果你的handleStatusChange函数接收事件参数，可以直接在函数内部添加阻止逻辑：

const handleStatusChange = (e) => {
  e.stopPropagation(); // 先阻止事件冒泡
  // 你的状态修改、接口请求等原有逻辑
  // ...
};

原理说明 #

浏览器的事件会遵循冒泡机制：当点击Switch时，事件会从Switch元素向上传递到其父元素（包括表格行），最终触发行的onClick跳转逻辑。通过stopPropagation()可以中断事件的冒泡传递，让行的点击事件不再被触发。

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