[英]onDblClick in react-konva not working
我正在使用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>
);
}
嘗試使用ref的節點。
node.on('dblclick dbltap', () => {
console.log('you clicked me!');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.