antd中Modal组件的使用

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

1.Modal组件的使用

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

还有destroyOnClose：

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

写法就是这样去写。

2.Modal数据展示

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

主要通过form属性中的getFieldDecorator方法去实现，通过initialValue展现表单值

3.代码展示

下面请看详细代码：

  cancelBatchModalVisible()}
    >
      

        
          
            
              {form.getFieldDecorator('id', {
                initialValue: formValue.id,
              })()}
            
          

          
            
              {form.getFieldDecorator('asset_number', {
                initialValue: formValue.asset_number,
              })()}
            
          
          
        
      
    

我删除了部分字段，字段有点多，下面请看效果图：

希望可以帮助到大家…