2017-07-24 5 views
-1

Ich versuche, eine Swipe-Funktion in ReactJS zu implementieren, aber bevor ich wirklich tauchen kann, kann ich nicht scheinen, den onTouchStart-Ereignis-Listener zu arbeiten. Ich habe online geschaut, aber die meisten Antworten sind veraltet oder sprechen meine Frage nicht direkt an. Über diesen Link habe ich bis jetzt die meisten Informationen erhalten, aber meine Frage ist noch immer unzureichend und einige der Antworten sind veraltet. What's the proper way of binding touchstart on React JS?Reagieren aufTouchStart nicht feuern

Ich ging zum Erstellen der einfachsten Form der Funktionalität und den folgenden Code enthalten. Ich versuchte zu console.log, wenn onTouchStart={this.swiped}> auftritt. Wenn ich den Listener zu onClick onClick={this.swiped}> ändere, funktioniert das sofort.

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> 
    ) 
    } 
} 

Auch ich habe den CSS-Style cursor: pointer das Element hinzugefügt. Ich habe auch versucht

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

Zugabe Aber nach dem React Blogs, React.initializeTouchEvents ist nicht mehr erforderlich.

Dies scheint so trivial und etwas, das wirklich einfach zu implementieren sein sollte. Was vermisse ich? Mein Ziel ist es, dies ohne eine externe Bibliothek zu implementieren. Hier ist ein Link zu Codepen, wo ich das umsetzen wollte. https://codepen.io/jorgeh84/pen/mMdBZg

Antwort

1

Das funktioniert für mich. Vielleicht ist das Problem, dass Sie es nicht auf einem echten Gerät testen?

+0

das löst sein Problem. –

0

Ich erkannte, dass Daniel auf etwas war. Daher muss ich nicht auf einem tatsächlichen Gerät testen. Wenn Sie Chrome verwenden, müssen Sie jedoch mithilfe der Gerätesymbolleiste ein mobiles Gerät simulieren, damit dies funktioniert.