antd mobile的抽屉效果的实现，坑多

最近用react和antd mobile写一个h5,有个主菜单的，边上有三条横杆，点击弹出主菜单，效果大概是这样。这个是我实现后的效果，

边上的三条杠也是自己写的，css写的，网上很多，这个不多说了，直接说抽屉功能，官网地址就一个demo，点这个地址，先引进来，

import {  Drawer  } from 'antd-mobile';

   // html
<Drawer
          className='my-drawer'
          style={{ minHeight: document.documentElement.clientHeight }}
          contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
          sidebarStyle={{ border: '1px solid #ddd' }}
          sidebar={sidebar}
          position='right'
          docked={this.state.docked}
          >
          <div onClick={this.closeMask} className={!this.state.docked? '':'mask'}/>
   </Drawer>

constructor(props) {
    super(props)
    this.state = {
      docked: false,
    };
  }

 // 抽屉效果
  onDock = (d) => {
    this.setState({
      [d]: !this.state[d],
    });
  }  
closeMask = ()=> {
     // 关掉抽屉
     this.setState({
      docked: false
     });
  }

简单说下，定位在右边的，docked是在state里面定义的变量，用来控制抽屉的显示和隐藏，其实照着官网来说基本实现了，但是那个遮罩层没出来，要自己手动加样式，点击了也没收回抽屉，我想着在<Drawer>标签加点击事件，点击遮罩层控制变量就好，但是并没生效，于是我在抽屉标签下面加一个div,写一个遮罩层，并绑定事件完美解决，就是简单的遮罩层，

   .mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,.3);
      z-index: 99;
    }

就可以做成这样效果了，其他样式细节就不多说了，遇到同样问题的欢迎讨论