ichigoryume programming blog

プログラミングに関する備忘録。主にHTML5, C#, Swiftなど。

React : シングルクリックとダブルクリックを排他的に処理するには

  • シングルクリックを拿捕して、その中でタイマーを起こし、タイマー終了時にクリック数を数える。タイマーはクリック数が1(初回)のときのみ起こすようにする。
  constructor(props) {
    super(props)
    this.clickCount = 0
  }

  render() {
    return (
      <div onClick={this.clickHandler.bind(this)}>{this.state.text}</div>
    )
  }

  clickHandler(e) {
    this.clickCount += 1
    if(this.clickCount != 1) {
      return
    }

    setTimeout(() => {
      if(this.clickCount == 1) {
        this.singleClickHandler()
      }
      else if(this.clickCount > 1) {
        this.doubleClickHandler()
      }
      this.clickCount = 0
    }, 200);
  }