onDblClick in react-konva funktioniert nicht

Question

Ich verwende Rect-Konva, um Canvas zu rendern. Ich ordne onDblClick für eine Gruppe zu und weise onClick, onDragEnd dieser Gruppe zu. Im onDragEnd-Handler habe ich eine axios-POST-Anfrage an den Server. Immer wenn ich auf die Gruppe doppelklicke, wird das onDragEnd-Ereignis ausgelöst. Weiß jemand, woran das Problem liegt?

Hier sind meine Code

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

Versuchen Sie den Knoten des ref zu verwenden.

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