ReactJS Pen Ereignisse

Question

Ich möchte nur einige grundlegende Ereignisse, die perfekt mit der Maus funktioniert, aber verrückte Ergebnisse mit meiner Oberfläche Stift haben. ReactJS unterstützt den Zeigertyp nicht, daher dachte ich, den Mouse-Ereignistyp zu verwenden. Das Move und das Down und Up werden nach einigen Klicks mit dem Stift nicht mehr aufgerufen.

Nicht vollständiger Code hier:

onDownCanvasEvent(e){ 
    e.preventDefault(); 
    console.log("DOWN"); 
} 

onUpCanvasEvent(e){ 
    e.preventDefault(); 
    console.log("UP"); 
} 

onMoveCanvasEvent(e){ 
    e.preventDefault(); 
    console.log("Move"); 
} 

onLeaveCanvasEvent(e){ 
    e.preventDefault(); 
    console.log("Leave"); 
} 

onDragCanvasEvent(e){ 
    e.preventDefault(); 
    console.log("Drag"); 
} 

onTouchCanvasEvent(e){ 
    e.preventDefault(); 
    console.log(e); 
    console.log("TouchMove"); 
} 

constructor(props){ 
    super(props); 
} 

render() { 
    return ( <canvas 
        onMouseMove={this.onMoveCanvasEvent.bind(this)} 
        onMouseUp={this.onUpCanvasEvent.bind(this)} 
        onMouseDown={this.onDownCanvasEvent.bind(this)} 
        onMouseLeave={this.onLeaveCanvasEvent.bind(this)} 
        onDrag={this.onDragCanvasEvent.bind(this)} 
        onTouchMove={this.onTouchCanvasEvent.bind(this)} 

Ist dies ein bekannter Fehler oder hat jemand eine Arbeit herum hat?

Vielen Dank im Voraus! :)

Answer 1

Gut fand ich eine wirklich einfache Lösung für dieses Problem nur diese im Projekt aus:

npm installieren --save reagieren-anzielbaren

Quelle: https://www.npmjs.com/package/react-pointable

<div className="App"> 
      <Pointable className="container" 
        onPointerUp={this.onUpPointer} 
        onPointerDown={this.onDownPointer} 
        onPointerLeave={this.onLeavePointer} 
        onPointerMove={this.onMovePointer}> 
       <canvas id="CanvasID"