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?

score 26 · Answer 1 · answered Nov 17 '15 at 06:17

26

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

answered Nov 17 '15 at 06:17

jasonslyvia

2,529
1
24
33

score 9 · Answer 2 · answered Jun 26 '15 at 14:50

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

score 2 · Answer 3 · edited May 24 '19 at 17:36

2

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

edited May 24 '19 at 17:36

ketchupisred

661
3
16

answered Feb 28 '14 at 01:19

Totty.js

15,563
31
103
175

This was not the problem. It's fixed with now and the code I posted works. I think my question was invalid. I was under the impression that `onTouchStart={this.handleTouchStart}` would be automatic, by naming convention. Is deleting the question itself ok? I don't think it helps anyone the way it is.. – Irae Carvalho Mar 02 '14 at 21:48
1

As an addendum, now that React has passed v0.12, `initializeTouchEvents` has been removed and touchevents [should supposedly just work](https://github.com/facebook/react/issues/2468). – Mike 'Pomax' Kamermans Apr 07 '15 at 18:47
The link you gave for more tutorials is now broken – iamsaksham Aug 19 '16 at 12:40

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

3 Answers3

Linked