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, i                )
})}
</div>
)
4，在render中写⼀个div来盛放内容
<div className="fristdrawer">
<div className='componyadd' arrow="horizontal" onClick={OpenChange.bind(this)}  style={{background:"#fff",height:'50px',position:'relative',marginB                                    <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.stateponyadd?this.stateponyad                                    <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}
>jquery是什么功能组件
</Drawer>
</div>
5，定义⼀个事件点击出现，
6，在state中定义抽屉伸出还是隐藏
7绑定点击事件
8，选中抽屉中的⽂字后抽屉隐藏切给赋值出现
9.将隐藏事件绑定在抽屉内容中的数据上
抽屉的样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。