模态没有在 ant-design 中关闭

Question

设计一些取消弹出窗口的 onclick 如何不关闭请帮助我，我对 this.When 很感兴趣，我检查我得到了这些 class 正在添加 ant-modal-mask ant-fade-appear ant-fade-appear-active ant-fade。不知道是什么原因请有人建议解决方案

这是代码。

import React, { useState,useEffect } from "react";
import { Modal, Button } from "antd";

import ReactDOM from "react-dom";
//import "antd/dist/antd.css";

const AddModal = (props) => {
  const [visible, setIsModalVisible] = useState(false);

  useEffect(() => {
    debugger
    showModal();
  }, [])

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
         <div>
        <Modal
       destroyOnClose={true}
        maskClosable={false}
          title="Add Studies"
          className="modalHeader"
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          width={720}
          footer={[
            <Button key="back" onClick={handleCancel}>
              Cancel
            </Button>,
            <Button
              key="Add"
              id="addButton"
              type="primary"
              onClick={handleOk}
            >
              Add
            </Button>,
          ]}
         
        ><div>hjhjg</div></Modal>
        </div>
 
  );
};
export default AddModal;

Answer 1

不要在 useEffect Hook 中调用 show modal 它会在每次重新渲染 hook 调用后调用它并且你的 madal 是打开的。

像

这样在减速时使可见为真

const [visible, setIsModalVisible] = useState(true) // make it true instead of false

模态没有在 ant-design 中关闭

Modal is not closing in ant-design

javascript

reactjs

antd