ReactJS événements Pen

Question

Je veux juste obtenir quelques événements de base qui fonctionne parfaitement avec la souris, mais a des résultats fous avec mon crayon de surface. ReactJS ne supporte pas le type de pointeur donc j'ai pensé à utiliser le type d'événement Mouse. Le Move et le Down et Up ne seront plus appelés après quelques clics avec le crayon.

Pas code complet ici:

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

Est-ce un bug connu ou que quelqu'un a un travail autour?

Merci d'avance! :)

Answer 1

D'accord, je trouve une solution vraiment facile pour ce problème il suffit d'exécuter dans votre projet:

NPM installer --save-réagir profil atmosphérique

source: 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"