実際にタッチイベントを使うかどうかはわかりませんが…とりあえず備忘録としてまとめ。
タイトルにある通り、onTouchStart などのタッチイベントを React で使用する方法です。
普段は onClick を使っていて、こちらでも問題ないのですが、要素をタッチした時のクリックイベント・タッチイベントをできる限り早く発火させたいので、試しに導入してみました。
今回参考にさせていただいたサイトはこちら。
タッチイベント | React 0.13 日本語リファレンス | js STUDIO
http://js.studio-kingdom.com/react/events/touch_events
さて、まず事前準備として、下記のコードをコンポーネントが描画される前のタイミングで実行します。
React.initializeTouchEvents(true);
コンポーネント描画前なので、私は index.js で deviceready が発火したタイミングで実行するようにしました。
もしくは componentWillMount() 内でもいいかもしれませんが、こちらは試していません。
なお、こちらを追加しないと onTouchStart を記述しても発火しないので、必ず追加してください。
上記を追加できたら、あとは任意の要素内で onTouchStart や onTouchEnd などのお好きなイベントを追加してください。
サンプルコードはこちら。
<Button onTouchEnd={() => console.log("Button touched.")}>Touch Button!</Button>
上記では、ボタンがタッチされたタイミングで、コンソールログを出力しています。
なお、素の JavaScript の場合、「ontouchend」と全て小文字ですが、React では、「onTouchEnd」のようにキャメルケースで記述するので、その点だけご注意ください。
で、実装した結果ですが…あまり onClick イベントを使っていた時と違いがわからず…。
他に、CSS なんかも色々修正しているのでそのせいだと思いますが、何度か実機で動作を確認して、実際に使用するかどうか決定したいと思います。
以上、ReactでonTouchStartなどのタッチイベントを使用する方法でした。
ご参考になれば幸いです。
