Question

我只想获得一些与鼠标完美配合的基本事件，但是我的表面铅笔会产生疯狂的结果。 ReactJS不支持指针类型，所以我想到使用鼠标事件类型。用铅笔点击一下后，不再调用Move和Down and 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"

ReactJS Pen事件

1 个答案: