React onTouchStart not firing

Question

我试图在ReactJS中实现滑动功能，但在我真的潜入之前，似乎无法让onTouchStart事件侦听器工作。我在网上查找过，但大多数答案已过时，或者不直接提出我的问题。这个链接是我迄今获得最多信息的地方，但它仍然不及我的问题，一些答案已经过时。 What's the proper way of binding touchstart on React JS?

我开始创建最简单的功能形式，并在下面包含该代码。我在尝试console.log时发生onTouchStart={this.swiped}>。在附注中，如果我将侦听器更改为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.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时，您需要使用设备工具栏来模拟移动设备才能正常工作。