react-table 防止复选框行的行 onClick

Question

我使用 react-table 最新版本。我的 table:

const MaterialTable = ({
 onClick,
 ...
}) => {
...
 const { getTableProps, headerGroups, rows, prepareRow, selectedFlatRows } = useTable(
  {
   columns: head,
   data,
   defaultColumn,
  },
  useRowSelect,
  useBlockLayout,
  useResizeColumns,
  (hooks) => {
   if (isSelectable) {
    hooks.visibleColumns.push((columns) => [
     {
      id: 'selection',
      width: 5,
      maxWidth: 5,
      // The header can use the table's getToggleAllRowsSelectedProps method
      // to render a checkbox
      Header: ({ getToggleAllRowsSelectedProps }) => (
       <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
      ),
      // The cell can use the individual row's getToggleRowSelectedProps method
      // to the render a checkbox
      Cell: ({ row }) => <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />,
     },
     ...columns,
    ]);
   }
  }
 );
 const renderTableBody = (row) => {
  prepareRow(row);
  return (
   <TableRow
    role="checkbox"
    onClick={() => onClick(row.original)}
   >
    {row.cells.map((cell) => (
     <TableCell
      {...cell.getCellProps()}
     >
      {cell.render('Cell')}
     </TableCell>
    ))}
   </TableRow>
  );
 };
...
};

我的 IndeterminateCheckbox 组件：

const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
 const defaultRef = React.useRef();
 const resolvedRef = ref || defaultRef;
 React.useEffect(() => {
  resolvedRef.current.indeterminate = indeterminate;
 }, [resolvedRef, indeterminate]);
 return <Checkbox ref={resolvedRef} {...rest} />;
});

问题是：点击checkbox时如何防止onClick函数？

Answer 1

查看有关 event.preventDefault()

的文档

react-table 防止复选框行的行 onClick

react-table prevent row onClick for Checkbox row

javascript

reactjs

react-table