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

Question

我有一个带有切换模态组件功能的页脚组件。 在模态组件中，我有一个背景包装器和嵌套在该包装器内的模态。 我已将 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>
  )
}

Answer 1

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

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

问题和修复：

1. 方法签名中缺少道具： const Modal = (props) => {
2. 不使用show prop 来显示/隐藏模态 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>元素（如果需要）会很有用。

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

Answer 2

这是发生的事情：

1. .modal或其中的其他元素。 没有侦听器附加到元素，因此事件继续冒泡到祖先。
2. 事件到达.modal__wrapper ，它有一个点击事件的监听器。 侦听器不区分哪个元素是事件的直接目标：元素本身或其后代之一。 即使目标是包装器内的另一个元素，也会触发props.toggle() 。 侦听器停止传播。 事件停止冒泡，但无论如何都没有人在树的更高处收听它。

我建议您将 ref 附加到包装器并检查事件目标是否是包装器本身。

模态组件如下所示：

const Modal = (props) => {
  const wrapperRef = useRef();

  const handleClick = e => {
    if(e.target === wrapperRef.current) {
      props.toggle(e);
    }
  };

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