反应 onTouchStart 不触发答案

【问题标题】：React onTouchStart not firing反应 onTouchStart 不触发
【发布时间】：2017-07-24 12:10:29
【问题描述】：

我正在尝试在 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

【问题讨论】：

标签： reactjs

【解决方案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'))

【讨论】：

【解决方案2】：

我意识到丹尼尔在做某事。所以我不需要在实际设备上进行测试，但是，当使用 Chrome 时，您需要使用他们的设备工具栏来模拟移动设备才能使其工作。

【讨论】：