在 React 中检查子复选框时防止触发父单击事件

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

}


长风秋雁
浏览 514回答 1
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()}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript