Reactで要素をダブルクリックした際のコールバックイベントを設定する 🖱️

いちかばちか、onDoubleClickでコールバックを設定してみたら動きました。
びっくりして、筆を取っています。

よくみたら、 ドキュメント にも記載がありましたが、全然知りませんでした。

ja.legacy.reactjs.org

ソースコード（抜粋）

<div
  onDoubleClick={ () => console.log('DoubleClick') }
/>

これで、OKです。楽々ですね。
いままではタイマーを使って自前で実装してました。

ただし、

<div
  onClick={ () => console.log('Click') }
  onDoubleClick={ () => console.log('DoubleClick') }
/>

それで良いのであれば問題ないですが、ダブルクリックした際にはクリックイベントを発火させたくない場合、結局ちょっとした自前実装が必要になりますね。