ANTD Modal 组件详解

一、概述

Modal 是 Ant Design 中常用的组件之一，用于弹出模态对话框。Antd Modal 组件提供了多种弹窗窗体形态、自定义 footer、自定义图标等功能，使用起来非常便捷。本文将介绍Antd Modal的基本用法、可配置项以及一些扩展应用。

二、基本用法

使用 Antd Modal 组件需要先安装 antd 包，然后引入 Modal 组件，比如：

    import { Modal } from 'antd';

接下来，我们可以通过以下方法来新建一个 Modal 对话框，其中 title 表示模态对话框的标题，visible 表示是否显示，onOk 和 onCancel 分别对应确认和取消按钮的回调函数：

    class App extends React.Component {
      state = {
        visible: false,
      };

      showModal = () => {
        this.setState({
          visible: true,
        });
      };

      handleOk = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };

      handleCancel = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };

      render() {
        return (
          
            
              Open Modal
            
            
              
Some contents...
              
Some contents...
              
Some contents...