onDblClick in react-konvaが動作しない

Question

私は反応konvaを使用してキャンバスをレンダリングしています。 OnDblClickをグループに割り当て、onClick、onDragEndもこのグループに割り当てます。 onDragEndハンドラでは、サーバーへのAxios POSTリクエストがあります。 Groupをダブルクリックすると、onDragEndイベントが発生します。誰が何が問題なのかここで知っていますか？ここで

は私のコード

handleMoving(){ 

    var thisElement = this.refs[this.state.key]; 

    this.setState({ 
     x: thisElement.x(), 
     y: thisElement.y(), 
     width: thisElement.getWidth(), 
     height: thisElement.getHeight() 
    }); 

    this.focus(); 
} 

handleDoubleClick(){ 
    console.log('dbclick'); 
    this.focus(); 
    const stage = this.refs[this.state.key+'_wrapper'].getParent().getParent().getParent(); 
    const pos = this.refs[this.state.key].getAbsolutePosition(); 
    document.getElementById('newText').addEventListener('keydown',this.handleTextChange); 
    document.getElementById('newTextWrapper').style.position = "absolute"; 
    document.getElementById('newTextWrapper').style.left = pos.x+"px"; 
    document.getElementById('newTextWrapper').style.top = pos.y+20+"px"; 
    document.getElementById('newText').style.width = this.refs[this.state.key+'_wrapper'].getWidth()+"px"; 
    document.getElementById('newTextWrapper').style.display = 'block'; 

} 

syncToServer(){ 
    axios.post('/api/element/text/update',{ 
     uid:this.state.uid, 
     key:this.state.key, 
     content:this.state.content, 
     stage:{ 
      x:this.state.x + this.refs[this.state.key].getParent().x(), 
      y:this.state.y + this.refs[this.state.key].getParent().y(), 
      width:this.state.width, 
      height:this.state.height, 
      fontSize:this.state.fontSize 
     } 
    }).then(function(response){ 
     console.log(response.data); 
    }); 
} 

render(){ 
    return (
     <Layer> 
      <Group onDblClick = {this.handleDoubleClick} 
        onClick = {this.handleClick} 
        onDragMove = {this.handleMoving} 
        onDragEnd = {this.syncToServer} 
        draggable = "true"> 
       <Rect ref = {this.state.key + '_wrapper'} 
         x = {this.state.x} 
         y = {this.state.y} 
         width = {this.state.width} 
         height = {this.state.height} 
         visible = {false} 
         fill = 'lightgrey' 
         cornerRadius = {3}> 
       </Rect> 
       <Text ref = {this.state.key} 
         x = {this.state.x} 
         y = {this.state.y} 
         fontSize = {this.state.fontSize} 
         fontFamily = {this.state.fontFamily} 
         text = {this.state.content} 
         fill = {this.state.color} 
         padding = {20} 
         > 
       </Text> 
      </Group> 
     </Layer> 
    ); 
} 

Answer 1

REFのノードを使用してみてくださいです。

node.on('dblclick dbltap',() => { 
    console.log('you clicked me!'); 
});