区分React

时间:2015-11-02 15:42:44

标签: reactjs

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

1 个答案:

答案 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)
}