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时，您需要使用其设备工具栏来模拟移动设备才能实现此功能。

无法触发onTouchStart

2 个答案: