ReactJS Pen事件

Question

我只想得到一些与鼠标完美配合的基本事件，但是使用我的表面笔具有疯狂的结果。 ReactJS不支持指针类型，所以我想使用鼠标事件类型。 移动和向下和向上不会再被铅笔点击后被调用。

不完整的代码在这里：

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

这是一个已知的bug或是否有人有一个变通？

在此先感谢！ :)

Answer 1

好吧，我发现这个问题只在您的项目运行这个一个非常简单的解决方案：

NPM安装--save反应，可指向

来源： 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"