反应式表格中的复选框行，防止行的点击。

Question

我用的是 react-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>
  );
 };
...
};

而我的 不确定复选框 组件。

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?

Answer 1

查看文档中关于 事件.preventDefault()