React onTouchStart未触发

Question

我正试图在ReactJS中实现一个卷帘功能，但在我真正深入研究之前，我似乎无法让onTouchStart事件侦听器工作。我已经在网上看过了，但大多数答案都过时了，或者没有直接回答我的问题。到目前为止，这个链接是我获得最多信息的地方，但它仍然不能满足我的问题，并且一些答案已经过时。What's the proper way of binding touchstart on React JS?

我开始创建功能的最简单形式，并将该代码包含在下面。当onTouchStart={this.swiped}>发生时，我正在尝试console.log。顺便说一句，如果我将监听器更改为onClick onClick={this.swiped}>，它会立即生效。

class App extends React.Component {
   contructor() {
    super();
    this.swiped = this.swiped.bind(this);
   }

  swiped() {
    console.log("Swiped")    
  }

  render() {
    return (
     <div>
      <div 
      className='swipe-card'
      onTouchStart={this.swiped}>Swipe Me
      </div>
    </div>
    )
  }
}

此外，我还向元素添加了CSS样式cursor: pointer。我还试着添加

componentWillMount: function(){
  React.initializeTouchEvents(true);
}

但根据React博客的说法，不再需要React.initializeTouchEvents。

这看起来很微不足道，而且实现起来也很简单。我遗漏了什么？我的目标是在没有外部库的情况下实现这一点。这是我尝试实现此功能的Codepen的链接。https://codepen.io/jorgeh84/pen/mMdBZg

Answer 1

这对我很有效。也许问题是你没有在真实的设备上测试它？

class App extends React.Component {
  contructor() {
    super();
  }

  swiped = () => {
    console.log("Swiped")    
  }

  render() {
    return (
      <div>
        <div className='swipe-card' onTouchStart={this.swiped}>Swipe Me</div>
      </div>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('App'))

Answer 2

我意识到丹尼尔在做一些事情。所以我不需要在实际的设备上测试，然而，当使用Chrome时，你需要使用他们的设备工具栏来模拟移动设备才能工作。