尝试找出区分React组件中单击和双击的最佳方法。
如果您不想在同一个DOM元素上应用它们,内置的mouse events(onClick和onDoubleClick)可以正常工作。有jQuery dblclick我不想使用。还有一个React Timer Mixin可以使用,但是我使用的是ES6类,所以我需要使用类似React Mixin的东西,我认为做这么简单的东西太过分了。
根据我的发现,人们会在点击事件中设置超时,所以我按照这个方向进行了调整:
import React, { Component } from 'react'
export default class Click extends Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this)
this.state = {
clickCount: 0
}
}
handleClick() {
let clickCount = this.state.clickCount
let singleClickTimer
clickCount++
this.setState({ clickCount: this.state.clickCount + 1 })
if (clickCount === 1) {
singleClickTimer = setTimeout(() => {
if (this.state.clickCount === 1) {
clickCount = 0
this.setState({ clickCount: 0 })
console.log('single click')
}
}, 300)
} else if (clickCount === 2) {
clearTimeout(singleClickTimer)
clickCount = 0
this.setState({ clickCount: 0 })
console.log('double click')
}
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click me</button>
</div>
)
}
}
它有效,但我试图找出是否有更好的方法。
修改
这个问题的一大问题是setTimeout
是异步的,所以我添加了另一个检查(if (this.state.clickCount === 1) {
),但这对我来说似乎不对。
另一个问题是延迟,立即调用double click
,但在设置超时(大约300ms)后将调用single click
。
答案 0 :(得分:-1)
我知道这是一个古老的问题,但是我也对此问题投入了很多精力,所以我想与那些也来这里的人分享我的解决方案。
const DOUBLECLICK_TIMEOUT = 300;
handleImagePress = () => {
this.setState({ pressCount: this.state.pressCount+1 });
setTimeout(() => {
if (this.state.pressCount == 0) { return }
if (this.state.pressCount == 1) {
// Do single press action
} else if (this.state.pressCount == 2) {
// Do double press action
}
this.setState({ pressCount: 0 });
}, DOUBLECLICK_TIMEOUT)
}