Question

我有一个简单的模态组件：

function Modal(props) {
  return (
    <div className={cx(styles.overlay, { show: props.show })} onClick={props.onClose}>
      <div className={styles.modal}>
        <span className={styles.closeBtn} onClick={props.onClose} />
        {props.children}
      </div>
    </div>
  )
}

onClose道具触发关闭模态，因此我将它附加到styles.overlay（您通常在点击时看到的模态上看到的暗叠加层）和styles.closeBtn（模态的关闭按钮）

整个流程的工作原理是styles.overlay内部的任何内容在点击时也会解散模态，这不是我所追求的功能，因此我只需要忽略它，如果单击该特定元素而不是它的子元素

Answer 1

function Modal(props) {
   return (
     <div className={cx(styles.overlay, { show: props.show })} onClick= {props.onClose}>
       <div className={styles.modal} onClick={e => e.preventDefault()}>
         <span className={styles.closeBtn} onClick={props.onClose} />
         {props.children}
       </div>
   </div>
   )
}

我认为，最好的方法是将叠加层和模态放在两个单独的div中，但这应该有效。

Answer 2

将onClick(e)={e.stopPropagation();}添加到模态对话框的点击处理程序中;这样可以防止它传播到叠加层。

希望它有效！祝你好运！

不要触发嵌套子元素的onClick

2 个答案: