はじめに

暗記カードをシングルクリック onClick でチェック、ダブルクリックonDoubleClickで削除したい。

と思ったのですが、onDoubleClickはボタンでしか使えない。

checkboxにonClickを使ってonDoubleClickを実装しようとしたらcheckboxはonClickを受け付けない。

そもそもReactでcheckboxやbuttonを使うのは邪道なのかもしれない。divで全部実装しようと思いついて、単純な例でやってみました。

実行例

mapを使うのでdivにkeyを付けたのだけどonClickでkeyが取得できない。keyと同じ値をidに入れたら取得できました。

clickCountにカウントを入れて、setTimeoutで決めた時間以内にサイドクリックするとダブルクリックと見做すと言うロジックなのでダブルクリックと認識されない場合が生じる。再度トライすればいいだけなので特に問題はない。

buttonにはonDoubleClickと言う便利なメソッドがあるので、これと同じことをシンプルな形で出来るみたい。buttonで実装すればダブルクリックの判定と、プログラム自体が綺麗になるだろう。しかし、buttonによる制限があると思うのでやってみないとわからない。

Reactのプログラムを見るとcheckboxは皆さん多用している。便利だものね。buttonは多くの場合divで作っている様に見える。