触屏事件的两种写法

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

第一种写法

import React,{Component} extends 'react'

export default class App from Component {
  style={
      'width':'200px',
      'height':'200px',
      'background':'#bada55'  
  }
  
  handleTouchStart = (e)=>{
        console.log('touchstart',e)
  }
  handleTouchEnd = (e)=>{
        console.log('touchEnd',e)
  }
  handleTouchMove = (e)=>{
        console.log('touchMove',e)
  }

  render(){
    return(
        <div style={this.style}
            onTouchStart={this.handleTouchStart}
            onTouchEnd={this.handleTouchEnd}
            onTouchMove={this.handleTouchMove}
        >
              
        </div>
    )
  }
}

第二种写法：原生JS

import React,{Component} extends 'react'

export default class App from Component {
  style={
      'width':'200px',
      'height':'200px',
      'background':'#bada55'  
  }
  componentDidMount(){
        let obj = document.getElementById('stage')
        obj.addEventListener('touchstart',()=>{
            console.log('touchstart')
            obj.addEventListener('touchmove',()=>{
                 console.log('touchmove') 
            })
        })
        obj.addEventListener('touchend',()=>{
            console.log('touchend') 
        })
  }
  handleTouchStart = (e)=>{
        console.log('touchstart',e)
  }
  handleTouchEnd = (e)=>{
        console.log('touchEnd',e)
  }
  handleTouchMove = (e)=>{
        console.log('touchMove',e)
  }

  render(){
    return(
        <div style={this.style} id='stage'>
              
        </div>
    )
  }
}