在 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>

编辑：

找到另一个之后的答案，不幸的是，上面的代码的工作方式将是一个额外的处理程序添加到Switch的组件onClick={e => e.stopPropagation()}