web-dev-qa-db-ja.com

React JSにタッチスタートをバインドする適切な方法は何ですか？

私はReact JSを学習しています。現在のところ、ソースコード、テスト、または公式ドキュメントで例を見つけることができません。ドキュメントでは、touchStartイベントはサポートされていますが、handleTouchStartは機能しません。

私が見つけた唯一の場所と実際に機能する例は react-touch プロジェクトでした。

次のコードは機能しますが、これがバインディングの唯一の方法ですか？私にとっては安価な回避策のようです。

var MyHeader = React.createClass({
  handleTouchStart: function() {
    console.log('handleTouchStart');
  },
  render: function() {
    return this.transferPropsTo(
        <header onTouchStart={this.handleTouchStart}>{title}</header>
    );
  }
};

これを行う実際の適切な方法は何ですか？

javascripttouch-eventreactjs
15
Irae Carvalho

React v0.14なので、手動でReact.initializeTouchEvents(true);を呼び出す必要はありません。

http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#breaking-changes

22
jasonslyvia

タッチイベントで遊ぶとき、React.initializeTouchEvents(true)をcomponentWillMountコンポーネントのライフサイクルメソッドに追加しましたが、正しく動作しているようです。

var MyHeader = React.createClass({
  componentWillMount: function(){
    React.initializeTouchEvents(true);
  },
  handleTouchStart: function() {
    console.log('handleTouchStart');
  },
  render: function() {
    return this.transferPropsTo(
        <header onTouchStart={this.handleTouchStart}>{title}</header>
    );
  }
};
7
Oakley

やあ、イラク！

レンダリングの前にReact.initializeTouchEvents（true）を呼び出す必要があります。ここで反応ドキュメントを確認してください： http://facebook.github.io/react/docs/events.html#touch-events

2
Totty.js