6

I recently upgraded from React 0.10 to React 0.14. Initially I was getting an error that React.initializeTouchEvents was not a function. I read some documentation which claimed that the need for this initialization was gone in the most recent version of React, so I did away with it. Now, however, no touch events are registering in my project. What do I need to do to get them to work again?

Below I have included some simple test code which I wrote to try out solutions to this problem. Currently no touch events are being registered at all.

My main js file:

/** @jsx React.DOM */

var React = require('react');
var ReactDOM = require('react-dom');
var TestButton = require('components/common/testButton');

try {
  var lander = (<TestButton/>);
  ReactDOM.render(lander, document.getElementById('myContainer'));
}
catch (e) {
  error.errorHandler(e);
}

My TestButton component:

/** @jsx React.DOM */

var React = require('react');

var TestButton = React.createClass ({
  getInitialState: function () {
    return {
      text: "Click Here!",
    };
  },
  toggle: function () {
    console.log('in toggle');
    if (this.state.text == "Click Here!"){
      this.setState({
        text: "Good Job!",
      });
    } else {
      this.setState({
        text: "Click Here!",
      });
    }
  },
  render: function () {
    return (
      <div onTouchEnd={this.toggle}>
          {this.state.text}
      </div>
      );
  },
});
module.exports = TestButton;

Any insights would be greatly appreciated

EDIT: I tried changing to onTouchEnd since onTouchTap is no longer available. However, I still am having the same problem.

EDIT: this works fine from a mobile device itself. However, I can't get it to work from the Chrome mobile emulator

kat
  • 5,645
  • 4
  • 19
  • 35

3 Answers3

2

As Mathletics said, onTouchTap is not available as an event. However, you can give this plugin a try to make things easier https://github.com/zilverline/react-tap-event-plugin

TurplePurtle
  • 361
  • 2
  • 7
  • Thank you, I will look into that. Any thoughts on why onTouchEnd doesn't work for me either? – kat Mar 03 '16 at 17:30
0

TouchTap is no longer available as an event. Please read the docs on TouchEvents to select the appropriate event. You can bind:

onTouchCancel onTouchEnd onTouchMove onTouchStart
Evan Davis
  • 35,493
  • 6
  • 50
  • 57
  • I changed `onTouchTap` in the above code to `onTouchEnd`, and still nothing is happening – kat Mar 02 '16 at 19:55
0

If you just want to capture a tap event use onClick. The events onTouchStart, onTouchEnd ect. are drag and drop events. For swipes you will need a third party library like react-hammerjs.

J. Mark Stevens
  • 4,911
  • 2
  • 13
  • 18