React-包装dev onClick处理程序在内部复选框之前触发

Question

我有一个带有onClick处理程序的div，单击该处理程序可以在子页面上导航到它。但是，此div中还包含一个Checkbox供选择，并带有onChange处理程序。

预期行为：首先触发复选框onChange处理程序，我可以停止传播到包装div的事件处理程序。

实际行为：首先触发div的事件处理程序，并通过导航到子页面，根本不会执行复选框的处理程序。

我该如何解决？

const onClick = () => props.history.push({ pathname: `/mySubpage/${resource._id}` });

const onCheckbox = (e) => {
    // this should prevent the onClick handler to be triggered
    e.stopPropagation();
    setIsSelected(!isSelected);
}

<div onClick={onClick}>
    ...
    <Checkbox onChange={onCheckbox}/>
    ...
</div>

Answer 1

您是否尝试过setTimeOut，否则请尝试......onClick =（）=> {setTimeOut（（）=> props.history.push（{路径名：/mySubpage/${resource._id}}），100）; }//我认为它应该起作用，因为它将延迟props.history.push（）方法，并且将呈现其他整个JavaScript，最后，您的div onclick方法将完成。否则在设置超时后设置任何虚拟状态