Question

设计一些取消弹出窗口的点击如何不关闭一些请帮帮我我用这个。当我检查我得到这些类正在添加 ant-modal-mask ant-fade-appear ant-fade-appear-active ant -褪色。不知道是什么原因请有人提出解决方案

这是代码。

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 打开后调用它。

在 decleration 时间使可见到 true

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

模态在蚂蚁设计中没有关闭

1 个答案: