ReactJS Pen事件

我只想得到一些與鼠標完美配合的基本事件，但是使用我的表面筆具有瘋狂的結果。 ReactJS不支持指針類型，所以我想使用鼠標事件類型。移動和向下和向上不會再被鉛筆點擊後被調用。ReactJS Pen事件

不完整的代碼在這裏：

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或是否有人有一個變通？

在此先感謝！ :)

來源

2017-08-01 rufreakde

好在擺弄之後，我發現如果我重新加載筆並開始按下並移動。「移動」被稱爲罰款，但是當我用「向上」舉起時，筆的「移動」不會被再次調用。 – rufreakde

好吧，我發現這個問題只在您的項目運行這個一個非常簡單的解決方案：

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"

來源

2017-08-01 14:48:07 rufreakde

回答

相關問題