javascript - ReactJS 笔事件

Question

我只想获得一些与鼠标完美配合的基本事件，但用我的表面铅笔却有疯狂的结果。ReactJS 不支持指针类型，所以我想到了使用鼠标事件类型。用铅笔点击几下后，Move 和 Down 和 Up 将不再被调用。

这里没有完整的代码：

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

这是一个已知的错误还是有人有解决方法？

提前致谢！:)

Answer 1

好的，我找到了一个非常简单的解决方案，只需在您的项目中运行它：

npm install --save react-pointable

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