React中使用touchmove拖动踩坑记录

工作中做了一个需求，页面上有个可以拖动的小图标，点击就返回首页，首页不显示该图标。

项目是微信公众号，主要是react框架

1、我们一般都会直接去dom上绑定一个监听事件onTouchMove={this.move}，然后在move方法中使用e.preventDefault();去阻止事件冒泡，但有个属性passive默认为 true，意思是为true时不能阻默认行为，如果你写了e.preventDefault();在pc端会有警告有效果，在手机端没有效果

<div onTouchMove={this.move} ><div/>

2、此时无法直接在dom上面绑定事件，我们可以通过addEventListener的方式来给这个div绑定事件，并可以将passive设置为false。

<div ref={e = >{ this.backRef = e} } ><div/>

this.backRef.addEventListener('touchmove', (e) => {
      this.touchMove(e);
 },{ passive: false });

touchMove(e){
    e.preventDefault();
    //do something
 }

3、通过id取dom或使用ref来拿到dom进行绑定。但是在我的需要这种情况下有时候组件是不渲染的，可能会拿到空。 此时可以在div绑定onTouchStart(用户按下图标，这时候无论如何图标是渲染出来了的)，

<div 
  ref={e = >{ this.backRef = e} } 
  onTouchStart={this.touchSatrt}
>
<div/>

  touchSatrt = ()=>{
    this.backRef.addEventListener('touchmove', (e) => {
      this.touchMove(e);
    },{ passive: false });
  }
 

touchMove(e){
    e.preventDefault();
    //do something
  }