react框架结合antd使用 抽屉组件

1.首先要引入antd中的组件

import $ from 'jquery'
import React from 'react'
import {BrowserRouter,Router,Link,} from "react-router-dom"
import { List,Switch,Drawer,NavBar,Icon,WhiteSpace,Picker,DatePicker} from 'antd-mobile';
import { createForm } from 'rc-form';
import arrayTreeFilter from 'array-tree-filter';
import { district, provinceLite } from 'antd-mobile-demo-data';

2,为了方便定义的变量，如果有接口可以调取接口来获取数据

const Item = List.Item;
const componymodule=[[
    {label:'10-20人',value:0},
    {label:'20-30人',value:1},
    {label:'30-50人',value:2},
    {label:'50-70人',value:3},
    {label:'70-100人',value:4},
    {label:'100-120人',value:5},
    {label:'120-160人',value:6},
  ]
]

3，在组件中定义抽屉中的内容，可以直接从接接口中获取

 const sidebar1=(

                

                

                
                
                
                
                {['IT软件服务','IT硬件服务','手工业','服务业','餐饮业','哈哈哈哈','嘻嘻嘻嘻'].map((item,index)=>{
                return(
                    {item}      
                )
            })}
            
            )

4，在render中写一个div来盛放内容

        

                                    联系人地址
                                    {this.state.componyadd?this.state.componyadd:"请选择"}
                                   
         
                                                          
                   

5，定义一个事件点击出现，

6，在state中定义抽屉伸出还是隐藏

7绑定点击事件

8，选中抽屉中的文字后抽屉隐藏切给赋值出现

9.将隐藏事件绑定在抽屉内容中的数据上

抽屉的样式