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不工作

回答

相关问题