react滑动组件

三种事件：onTouchStart，onTouchMove, onTouchEnd。

handleStart = (e) => {
        e.preventDefault();     
        this.setState({  
            startX : e.targetTouches[0].clientX,
            startY : e.targetTouches[0].clientY,
            x:0,
            y:0,
        });
    }

    handleTouchMove = (e) => {
        const { startX, startY, width, height } = this.state;//取得初始坐标和屏幕可视宽高        
        this.setState({
            ///都可以来设置实时变化的值，不用用到changedTouches；
            x: e.touches[0].clientX - startX, //当前触摸点-初始坐标取得实时变化值
            y: e.touches[0].clientY - startY,
        });
        
    }

handleTouchEnd = (e) => {
  let xCur = this.state.x;
  let width = window.screen.availWidth;   
  let curIndex = this.state.index;        
    if(xCur > width/5 && curIndex !== 0){
      curIndex -- ;
      $(".sliders").css("left",-curIndex*7.5+"rem")         
      this.setState({
        index: curIndex
      })
      console.log(curIndex)  
    }else if(xCur < -width/5 && curIndex !== 2){
      curIndex ++ ;
      $(".sliders").css("left",-curIndex*7.5+"rem")          
      this.setState({
        index: curIndex
      })
      console.log(curIndex)
    }
}