What's the proper way of binding touchstart on React JS?

Question

I am learning React JS and as of now I cannot find any example on the source code, tests or on the official docs. On the docs the touchStart event is said to be supported but handleTouchStart does not work.

The only place I found and example that actually works was on react-touch project.

The following code works, but is this the only way of binding? It looks like a cheap workaround for me.

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

What is actually the proper way of doing this?

Answer 1

Since React v0.14, you don't have to call React.initializeTouchEvents(true); manually anymore.

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

Answer 2

When playing with touch events I added React.initializeTouchEvents(true) to the componentWillMount component lifecycle method and it seemed to work correctly.

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>
    );
  }
};

Answer 3

Hy, Iraê!

You have to call React.initializeTouchEvents(true) before any rendering. Check react doc here: http://facebook.github.io/react/docs/events.html#touch-events