Chrome 移动模拟器中的 ReactJS 升级破坏了触摸事件答案

【问题标题】：Touch Events Broken with ReactJS Upgrade in Chrome Mobile EmulatorChrome 移动模拟器中的 ReactJS 升级破坏了触摸事件
【发布时间】：2016-03-02 19:33:55
【问题描述】：

我最近从 React 0.10 升级到了 React 0.14。最初我收到React.initializeTouchEvents 不是函数的错误。我阅读了一些文档，声称在最新版本的 React 中不需要这种初始化，所以我取消了它。但是，现在我的项目中没有注册触摸事件。我需要做什么才能让他们再次工作？

下面我包含了一些简单的测试代码，我编写这些代码是为了尝试解决这个问题。目前根本没有注册触摸事件。

我的主js文件：

/** @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);
}

我的 TestButton 组件：

/** @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;

任何见解将不胜感激

编辑：我尝试更改为 onTouchEnd，因为 onTouchTap 不再可用。但是，我仍然遇到同样的问题。

编辑：这在移动设备本身上运行良好。但是，我无法在 Chrome 移动模拟器上运行它

【问题讨论】：

标签： javascript mobile reactjs touch-event

【解决方案1】：

正如 Mathletics 所说，onTouchTap 不能作为事件使用。不过，你可以试试这个插件，让事情变得更简单https://github.com/zilverline/react-tap-event-plugin

【讨论】：

谢谢，我会调查的。关于为什么 onTouchEnd 对我也不起作用的任何想法？

【解决方案2】：

TouchTap 不再作为事件提供。请read the docs on TouchEvents 选择合适的活动。你可以绑定：

onTouchCancel onTouchEnd onTouchMove onTouchStart

【讨论】：

我把上面代码中的onTouchTap改成了onTouchEnd，还是什么都没有发生

【解决方案3】：

如果您只想捕获点击事件，请使用 onClick。 onTouchStart、onTouchEnd 等事件。是拖放事件。对于滑动，您将需要像 react-hammerjs 这样的第三方库。

【讨论】：