在 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 => {&nbsp; event.stopPropagation();&nbsp; setState({ ...state, [name]: event.target.checked });};<TableRow&nbsp; &nbsp;className="h-40 cursor-pointer"&nbsp; &nbsp;hover&nbsp; &nbsp;role="checkbox"&nbsp; &nbsp;aria-checked={isSelected}&nbsp; &nbsp;tabIndex={-1}&nbsp; &nbsp;key={n.id}&nbsp; &nbsp;selected={isSelected}&nbsp; &nbsp;onClick={event => handleClick(n)}>&nbsp; <TableCell component="th" scope="row" align="left">&nbsp; &nbsp; <Switch&nbsp; &nbsp; &nbsp;checked={state.checkedB}&nbsp; &nbsp; &nbsp;onChange={handleChange("checkedB")}&nbsp; &nbsp; &nbsp;value="checkedB"&nbsp; &nbsp; &nbsp;onClick={e => e.stopPropagation()}&nbsp; &nbsp; />&nbsp; </TableCell></TableRow>编辑：找到另一个之后的答案，不幸的是，上面的代码的工作方式将是一个额外的处理程序添加到Switch的组件onClick={e => e.stopPropagation()}