2017-07-02 69 views
0

我有事件在畫布上onMouseDown -問題在reactjs與event.which - 未定義

<canvas id="myCanvas" width="150" height="150" onMouseMove={this.beginNewPatch.bind(this)}></canvas> 

但是,當我在上面畫布上移動,我想,如果在鼠標左鍵點擊與e.which到現在得到的,但這打印undefined。任何提示爲什麼?

beginNewPatch(e){ 
    console.log(e.which); 
    if (e.which === 1) { 
    let dot, eventDoc, doc, body, pageX, pageY; 
    e = e || window.event; 
    } 
} 

回答

0

嘗試event.button(在這裏看到來自MDN):

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.beginNewPatch = this.beginNewPatch.bind(this); 
 
    } 
 
    
 
    componentDidMount() { 
 
    const ctx = this.refs.canvas.getContext('2d'); 
 
    ctx.fillRect(0,0, 100, 100); 
 
    } 
 
    
 
    beginNewPatch(event) { 
 
    console.log(event.button); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <canvas 
 
     ref="canvas" 
 
     width={100} 
 
     height={100} 
 
     onMouseDown={this.beginNewPatch} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('app') 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>