ReactJS Pen события

Question

Я просто хочу получить некоторые основные события, которые отлично работают с мышью, но дают сумасшедшие результаты с моим поверхностным карандашом. ReactJS не поддерживает тип указателя, поэтому я подумал об использовании типа события Mouse. Перемещение и Вниз и Вверх больше не будут вызываться после нескольких щелчков карандашом.

Не полный код здесь:

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 - сохранить реактивно-ориентированный

источник: 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"