[防止在React中选中子复选框时触发父点击事件

Question

在React中，当将切换按钮放置在重定向组件内部时，可以禁用重定向吗？

我有一个可单击的TableRow，它可以重定向到另一个组件，并且在其中具有切换按钮（复选框），如下所示：

[TableRow组件及其内部的TableCell和Switch按钮：

<TableRow
   className="h-40 cursor-pointer"
   hover
   role="checkbox"
   aria-checked={isSelected}
   tabIndex={-1}
   key={n.id}
   selected={isSelected}
   onClick={event => handleClick(n)}
>
  <TableCell component="th" scope="row" align="left">
    <Switch
     checked={state.checkedB}
     onChange={handleChange("checkedB")}
     value="checkedB"
    />
  </TableCell>
</TableRow>

这里是handleChange功能和“切换”按钮的状态：

const [state, setState] = React.useState({
   checkedB: true,
});

const handleChange = name => event => {
   setState({ ...state, [name]: event.target.checked });
};

这是handleClick组件中的TableRow函数，该函数重定向到另一个组件：

function handleClick(item){
    props.history.push('/apps/fournisseurs/'+item.id+'/'+ item.handle);
}

Answer 1

单击event.stopPropagation()时，您将要停止传播（Switch）。这将阻止事件在链上冒泡，并且实质上将“忽略”父点击处理程序（在这种情况下为onClick。）>

const handleChange = name => event => {
  event.stopPropagation();
  setState({ ...state, [name]: event.target.checked });
};
<TableRow
   className="h-40 cursor-pointer"
   hover
   role="checkbox"
   aria-checked={isSelected}
   tabIndex={-1}
   key={n.id}
   selected={isSelected}
   onClick={event => handleClick(n)}
>
  <TableCell component="th" scope="row" align="left">
    <Switch
     checked={state.checkedB}
     onChange={handleChange("checkedB")}
     value="checkedB"
     onClick={e => e.stopPropagation()}
    />
  </TableCell>
</TableRow>
编辑：

不幸的是，找到另一个answer之后，上述代码的工作方式是向Switch的onClick={e => e.stopPropagation()}组件添加一个附加处理程序。>