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=(<div>
                <div className='drawer_search' style={{width:'300px',height:'30px',lineHeight:'30px',border:'1px solid #999',}}>
                <p className='icon iconfont icon-CRM-icofont-46' style={{float:'left',height:'27px',width:'35px',textAlign:'center',lineHeight:'30px'}}></p>
                <input type="text" placeholder="搜索" style={{float:'left',height:'27px',width:'200px',lineHeight:'30px',border:'0'}}></input>
                
                </div>
                
                {['IT软件服务','IT硬件服务','手工业','服务业','餐饮业','哈哈哈哈','嘻嘻嘻嘻'].map((item,index)=>{
                return(
                    <span style={{display:'block',lineHeight:'30px',width:"200px",textAlign:"center",fontSize:"14px",color:'#009ef9'}}  onClick={this.handleClick1.bind(this, item)}  key={index}>{item}</span>      
                )
            })}
            </div>
            )

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

<div className="fristdrawer">
        <div className='componyadd' arrow="horizontal" onClick={this.onOpenChange.bind(this)}  style={{background:"#fff",height:'50px',position:'relative',marginBottom:'1px'}} >
                                    <span style={{float:"left",marginLeft:'20px',fontSize:'14px',height:'50px',lineHeight:'50px'}}>联系人地址</span>
                                    <span style={{float:"right",marginRight:'70px',fontSize:'14px',height:'50px',lineHeight:'50px'}}>{this.state.componyadd?this.state.componyadd:"请选择"}</span>
                                   <i className='icon iconfont icon-CRM-icofont-43' style={{position:'absolute', right:'20px',top:'15px'}}></i>
         </div>
                      <Drawer
                                        className="my-drawer fristdrawer"
                                        style={{ height: this.state.drawershow1 ?document.documentElement.clientHeight-60  : 0,minWidth:this.state.drawershow1 ? "200px" : 0}}
                                        position='right'
                                        open={this.state.drawershow1}
                                        sidebar={sidebar}            
                                    >                                    
                   </Drawer>
</div>

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

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

7绑定点击事件

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

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

抽屉的样式