Ant-Design-组件-——-Modal

最新推荐文章于 2024-05-17 16:07:17 发布

原创最新推荐文章于 2024-05-17 16:07:17 发布 · 740 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ant Design

本文详细介绍了Ant Design中的Modal组件用法，包括引入、定义属性和渲染步骤。作者李尧晖是芦苇科技的前端开发工程师，擅长前端框架及微信小程序开发。同时，文章提及作者的代表作品和联系方式，为读者提供了深入交流与合作的途径。

用法

1. 引入 Modal 组件

import { Modal } from 'antd';

2. 定义组件属性

参数	说明	类型	默认值
title	标题	string 或者 ReactNode 无
visible	对话框是否可见	boolean	无
onCancel	取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	无
onOk	点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	无

  state = {
    isShowEditModal: false, //  显示Modal
  }

  handleEditOkClick = () => {
    console.log('点击确定');

    this.setState ({
      isShowEditModal: false,
    })
  }

  handleEditCancelClick = () => {
    console.log('点击取消');

    this.setState ({
      isShowEditModal: false,
    })
  }

3. 渲染组件

<Modal
	title="信息填写"
	visible={this.state.isShowEditModal}
	onOk={this.handleEditOkClick}
	onCancel={this.handleEditCancelClick}
>
	<p>Some contents...</p>
	<p>Some contents...</p>
	<p>Some contents...</p>
</Modal>