antd中Modal组件的使用

原创已于 2022-05-26 08:36:05 修改 · 1.6w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#antd #Modal #Modal组件使用 #Modal获取值

于 2019-08-21 10:11:51 首次发布

antd踩坑记专栏收录该内容

6 篇文章

订阅专栏

本文深入解析Ant Design中Modal组件的使用技巧，包括常见属性介绍、数据展示方法及代码实例，助您快速掌握Modal框的高效应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于刚接触antd的小白来说来弄懂Modal组件，还真不是一件简单的事情，关于如何取值，如何赋值，是我刚开始遇到的很大的问题：

1.Modal组件的使用

首先想去很好的展示Modal框，得需要明白该组件中的一些属性，官网介绍的也很详细，这里给大家展示我经常使用的属性：
在这里插入图片描述
还有destroyOnClose：

这里给简单大家看一下一个例子：

写法就是这样去写。

2.Modal数据展示

关于如何通过点击按钮，跳出模态框并展示列表数据，其实这个也很简单，antd这个框架做的也很好，通过表单的双向绑定可以很快的实现：

在这里插入图片描述
主要通过form属性中的getFieldDecorator方法去实现，通过initialValue展现表单值

3.代码展示

下面请看详细代码：

 <Modal
      width={600}
      destroyOnClose
      title="修改状态"
      visible={modalBatchVisible}
      onOk={okHandle}
      onCancel={() => cancelBatchModalVisible()}
    >
      <Form layout="inline" labelAlign='right'>
        <Row gutter={{ md: 12, lg: 24, xl: 48 }}>
          <Col md={12} sm={24}>
            <FormItem label="资&nbsp;&nbsp;产&nbsp;&nbsp;ID">
              {form.getFieldDecorator('id', {
                initialValue: formValue.id,
              })(<Input disabled='true' />)}
            </FormItem>
          </Col>

          <Col md={12} sm={24}>
            <FormItem label="资产编号">
              {form.getFieldDecorator('asset_number', {
                initialValue: formValue.asset_number,
              })(<Input disabled='true' />)}
            </FormItem>
          </Col>
          
        </Row>
      </Form>
    </Modal>

我删除了部分字段，字段有点多，下面请看效果图：
在这里插入图片描述
希望可以帮助到大家…