Question

尝试找出区分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。

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

区分React

1 个答案: