React 中的自定义模式（打开和关闭问题）

Question

所以，我正在尝试在 React 中制作一个模态。我将模态与触发并渲染它以显示自身的元素分离到另一个文件中。模式打开，但由于某种原因，当我尝试通过按模式背景将其关闭时，它没有关闭。

Card.js 文件：

import React, { useState } from "react";
import "./styles/card.css";
import { Modal } from "./modals";

export const Card = () => {
  const [modalState, setModalState] = useState(false);

  const openModal = () => setModalState(true);
  const closeModal = () => setModalState(false);

  return (
    <div className="card" onClick={openModal}>
      <p>Hello</p>
      {modalState && <Modal closeModal={closeModal} />}
    </div>
  );
};

Modal.js 文件：

import React from "react";
import "./styles/modal.css";
import { createPortal } from "react-dom";

export const Modal = ({ closeModal }) => {
  const stopPropagation = (event) => {
    event.stopPropagation();
  };

  return (
    <>
      {createPortal(
        <div className="modal-backdrop" onClick={closeModal}>
          <div className="modal" onClick={stopPropagation}>
            <p className="gbye">Goodbye</p>
          </div>
        </div>,
        document.body
      )}
    </>
  );
};

卡片.css

.card {
  background-color: blue;
  height: 200px;
  width: 200px;
}

模态.css

.modal-backdrop {
  position: fixed;
  transform: translate(-50% -50%);
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  transform: translate(50% 50%);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

我尝试使用 createportal 将其与根文件分开，因为我认为，样式可能会相互干扰，但事实并非如此。

Answer 1

尝试将状态移出

<>
  <div className="card" onClick={openModal}>
    <p>Hello</p>
  </div>
  {modalState && <Modal closeModal={closeModal} />}
</>

或者在模态背景上单击停止传播

className="modal-backdrop"
onClick={(e) => {
  stopPropagation(e);
  closeModal();
}}

祝你有美好的一天！