react中事件冒泡导致弹窗关不掉

代码如下

     <Modal
        actions={[
          {
            text: 'Cancel',
            variant: 'secondary',
            onClick: () => setDeleteAutomatedReportModalVisible(false),
          },
      />

点击Cancel按钮，弹窗应该关闭才对，但是并没有生效，在onClick中打印信息也能打印出来。最后发现弹窗外面的父组件也有一个onClick方法onClick: () => setDeleteAutomatedReportModalVisible(true),这样就导致点击Cancel按钮时触发了事件冒泡，父组件中的onClick事件也被触发了，值一直为true，所以弹窗一直显示。解决方法，只需要在子组件的onClick方法加上stopPropagation()。

    <Modal
        actions={[
          {
            text: 'Cancel',
            variant: 'secondary',
            onClick: (e) => {
              e.stopPropagation()
              setDeleteAutomatedReportModalVisible(false)
            },
          },
      />