event.stopPropagation() 不适用于 bootstrap 模态

Question

当点击模态 window 主体时，它运行是外部 div 的 onClick 处理程序。 event.stoppropagation() 外部 div 内的按钮和模态内的按钮工作正常，但不知道如何取消绑定外部 div 模态主体上的单击处理程序。

sample code（模态在 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 外面就可以解决你的问题了。

event.stopPropagation() 不适用于 bootstrap 模态

event.stopPropagation() not working on bootstrap modal

javascript

reactjs

react-bootstrap