时间戳

首页 > 解决方案 > 反应：stopPropagation() 似乎不起作用？

javascript - 反应：stopPropagation() 似乎不起作用？

问题描述

我有一个带有切换模式组件功能的页脚组件。在模态组件中，我有一个背景包装器和嵌套在该包装器内的模态。我已将 toggleModal 函数设置为道具并将其添加到模态的包装器中。我不希望模态本身具有此单击功能，因此我stopPropagation()在我的功能中使用以阻止事件冒泡，尽管这似乎不起作用。

页脚组件：

const Footer = () => {
  const [showModal, setShowModal] = useState(false);

  function toggleModal(e) {
    e.stopPropagation();
    setShowModal(!showModal);
  }
  return (
    <div>
      <button onClick={toggleModal}>Modal toggle</button>
      <Modal show={showModal} toggle={toggleModal}>This is a modal</Modal>
    </div>
  )
}

模态组件：

const Modal = () => {
  return (
   <div className="modal__wrapper" onClick={props.toggle}>
     <div className="modal p-3">
       <div className="modal__close" onClick={props.toggle} role="button" aria-hidden="true">
         X
       </div>
       {props.children}
     </div>
   </div>
  )
}

标签： javascriptreactjsstoppropagation

解决方案

阻止事件冒泡，尽管这似乎不起作用。

你的意思是事件冒泡不起作用，或者只是模式一般不起作用？我发现了两个代码问题，修复后似乎使模式工作。此外，您可能想要 的行为e.preventDefault()，但我不确定您的问题。

问题与修复：

  1. 方法签名中缺少道具：const Modal = (props) => {
  2. 不使用showprop 显示/隐藏模态 div：props.show && <div className="modal__wrapper" onClick={props.toggle}>

stopPropagation & preventDefault

要查看 和 的行为差异stopPropagation，请preventDefault尝试将其添加radio到您的按钮下方。每次需要重置以radio进行实验时，您都需要刷新页面。

<input type="radio" name="gender" value="male" onClick={toggleModal}/>

preventDefault停止radio设置，它会阻止无线电组件的默认行为设置值。

stopPropagation不会阻止设置radio，因为它只会阻止事件冒泡到父元素。text <input>防止诸如 Enter 键之类的事件影响<form>要提交的父元素（如果需要）将很有用。

我希望这有助于解决您的问题。

推荐阅读