如何禁用材料反应表中一列的行单击？

Question

我在 Material React Table 中启用了行单击功能，以将用户重定向到详细信息页面。我还想实现一个开关组件来启用或禁用用户。但是，当我单击开关时，也会触发行单击事件。我怎样才能防止这种情况发生？

const columns = [
columnHelper.accessor('status', {
header: 'Status',
size: 50,
Cell: ({ cell }) => {
    const isActive = cell.getValue()
      const checked = isActive === 'ACTIVE'
      return (
        <Tooltip
          title={isActive === 'ACTIVE' ? 'Active' : 'Inactive'}
          placement="left-end"
          arrow
          TransitionComponent={Zoom}
        >
          <Switch
            checked={checked}
            onChange={handleStatusChange}
            inputProps={{ 'aria-label': 'controlled' }}
          />
        </Tooltip>
      )
    },
  }),
  columnHelper.accessor('name', {
    header: 'Name',
  }),
  columnHelper.accessor('code', {
    header: 'Code',
  }),
  columnHelper.accessor('description', {
    header: 'Description',
  }),
  columnHelper.accessor('conflictResolution.priority', {
    header: 'Priority',
  }),
  columnHelper.accessor('createdBy', {
    header: 'Created By',
  }),
]
const table = useMaterialReactTable({
    ...defaultMRTOptions,
    columns,
    data: offers || [],
    onPaginationChange: setPagination,
    state: { pagination, isLoading },
    rowCount: totalRecords,
    muiTableBodyRowProps: ({ row }) => ({
      onClick: () => {
        navigate(`/view/${row.id}`)
      },
      sx: {
        cursor: 'pointer',
      },
    }),
  })

Answer 1

尝试在更改事件上添加 stopPropagation

onChange={(event) => {
  event.stopPropagation(); 
  handleStatusChange(event);
}}