onDblClick在react-konva不工作

我使用react-konva來渲染畫布。我將onDblClick分配給一個組，我也將OnClick，onDragEnd分配給該組。在onDragEnd處理程序中，我有一個axios POST請求到服務器。每當我雙擊組時，就會觸發onDragEnd事件。有人知道這裏有什麼問題嗎？onDblClick在react-konva不工作

這裏是我的代碼

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> 
    ); 
}

來源

2017-07-25 Phong Nhat

您需要提供有關組件的代碼和鏈接。但這不是不可能的，因爲拖放實現和雙擊不能很好地混合。如果在一個組上，你可能不得不做一個'onMouseDown'並且終止事件。 –

@DimitarChristoff我已經嘗試刪除onDrageEnd事件，仍onDblClick事件不會觸發。 –

@PhongNhat你可以創建沒有ajax的小演示（這裏沒有關係）？ – lavrton

嘗試使用裁判的節點。

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

來源

2017-09-26 18:50:40

onDblClick在react-konva不工作

回答

相關問題