CODEWITHSUNDEEP
javascripttouch-eventreactjs
Irae Carvalho
Irae Carvalho

Reputation: 787

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

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?

Upvotes: 18

Views: 47320

Answers (3)

Totty.js
Totty.js

Reputation: 15861

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

Upvotes: 2

jasonslyvia
jasonslyvia

Reputation: 2535

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

Upvotes: 26

Oakley
Oakley

Reputation: 666

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

Upvotes: 9

Related Questions