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時，您需要使用設備工具欄來模擬移動設備才能正常工作。