或许你用得上之《自定义 Antd Modal 》🐚

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

ant.design/components/…

antd 的文档是相当不错的，里面基本上罗列的十分详细🔎

这次的改造呢，就是使用这个方法的。

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

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

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

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

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

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default App;

删除 title, onOk, onCancel

增加

modalRender={() => <MyMoal CloseTip={CloseTip} visible={isModalVisible} />}
centered={true}
width={370}
footer={null}
maskClosable={true}

MyModal 自定义的组件。

const MyModal = (props) => {
  const toClick = () => {
    props.CloseTip()
  }
  return (
    <div className="login-modal">
      <div className="modal-wrapper">
        <div className="button" onClick={toClick}>点击进入</div>
      </div>
      <img onClick={() => props.CloseTip()} className="close-img" src={Close} />
    </div>
  );
};

通过传入的 props 属性，实现对话框的显示与隐藏。

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

这个时候，你会发现，无论你怎么点击，事件都没有生效。这是怎么回事。

在 antd 的 git issue 中，我们发现了解决办法。

其实是因为 .ant-modal 默认加了样式 pointer-events: none

只需要在想要交互的组件上 加个 style={{pointer-events: auto}} 就行

现在传入的参数就变成了

modalRender={() => <MyMoal CloseTip={CloseTip} visible={isModalVisible} />}
centered={true}
width={370}
footer={null}
style={{ pointerEvents: 'auto' }}
maskClosable={true}

相当完美，这个时候，我们想要的效果就实现了。

但是发现，为什么蒙层无法点击呢？原来是我们删除了在 Modal 上面的 onCancel

添加上，蒙层就可以完美关闭啦

modalRender={() => <MyMoal CloseTip={CloseTip} visible={isModalVisible} />}
centered={true}
width={370}
footer={null}
style={{ pointerEvents: 'auto' }}
maskClosable={true}
onCancel={CloseTip}

完整代码参考如下：

import React, { useState } from "react";
import { Modal } from "antd";
import Close from "./images/Close.png";

const MyModal = (props) => {
  const toClick = () => {
    props.CloseTip()
  }
  return (
    <div className="login-modal">
      <div className="modal-wrapper">
        <div className="button" onClick={toClick}>点击进入</div>
      </div>
      <img onClick={() => props.CloseTip()} className="close-img" src={Close} />
    </div>
  );
};

const Example = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  const CloseTip = () => {
    setIsModalVisible(false);
  }

  return (
    <div>
      <Modal
        modalRender={(modal) => (<MyModal CloseTip={CloseTip} modal={modal} />)}
        centered={true}
        width={370}
        visible={isModalVisible}
        onCancel={CloseTip}
        footer={null}
        style={{ pointerEvents: 'auto' }}
        maskClosable={true}
      ></Modal>
    </div>
  );
};

export default Example;