javascript - event.stopPropagation() 不适用于引导模式

Question

单击模态窗口主体时，它会运行外部 div 的 onClick 处理程序。 event.stoppropagation()外部 div 内的按钮和模态内的按钮工作正常，但不知道如何解除模态主体上的外部 div 单击处理程序的绑定(bind)。
sample code (Modal 不适用于 csb，请在您的代码编辑器上运行)

import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";

export default function App() {
  const [show, setShow] = useState(false);

  const handleShow = (event) => {
    event.stopPropagation();
    setShow(true);
  };

  const handleClose = (event) => {
    event.stopPropagation();
    setShow(false);
  };

  const deleteModal = () => {
    return (
      <Modal
        id="deleteModal"
        className="modal"
        show={show}
        onHide={handleClose}
        centered
        size="sm"
        backdrop="static"
        keyboard={false}
      >
        <Modal.Body>
          <div>
            <span>Delete Tweet ?</span>
          </div>
          <div>This can’t be undone</div>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Cancel
          </Button>
          <Button variant="primary">Delete</Button>
        </Modal.Footer>
      </Modal>
    );
  };

  const postHandler = () => {
    alert("clicked on div");
  };

  return (
    <div onClick={postHandler} style={{ border: "1px solid" }}>
      {deleteModal()}
      <h1>Hello CodeSandbox</h1>
      <Button variant="info" onClick={handleShow}>
        Delete
      </Button>
    </div>
  );
}

P.S- 我正在使用 react-bootstrap用于创建模态。

Answer 1

 return (
    <>
      {show && deleteModal()}    // just move this logic outside the div
      <div onClick={postHandler} style={{ border: '1px solid' }}>
        <h1>Hello CodeSandbox</h1>
        <Button variant="info" onClick={handleShow}>
          Delete
        </Button>
      </div>
    </>
  );

嘿，如果你只是移动 deleteModal在 div 之外，它将解决您的问题。