Touch Events Broken with ReactJS Upgrade in Chrome Mobile Emulator

Question

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

Answer 1

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