onDblClick in react-konva 不起作用

Question

我正在使用react-konva来渲染画布。我为一个组分配onDblClick，我也为这个组分配onClick，onDragEnd。在onDragEnd处理程序中，我有一个向服务器发出的axios POST请求。每当我双击组时，都会触发 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!');
});