触摸事件因 Chrome 移动模拟器中的 ReactJS 升级而中断

Touch Events Broken with ReactJS Upgrade in Chrome Mobile Emulator

本文关键字：ReactJS 中断 事件 Chrome 移动 模拟器 触摸      更新时间：2023-09-26

我最近从 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);
}

我的测试按钮组件：

/** @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移动模拟器工作

正如Mathletics所说，onTouchTap不能作为事件使用。但是，您可以尝试使用此插件以使事情变得更容易 https://github.com/zilverline/react-tap-event-plugin

TouchTap不再

作为事件提供。请阅读有关触摸事件的文档以选择适当的事件。您可以绑定：

onTouchCancel onTouchEnd onTouchMove onTouchStart

如果您只想捕获点击事件，请使用 onClick。事件在TouchStart，onTouchEnd等。是拖放事件。对于滑动，您将需要一个第三方库，例如 react-hammerjs。

相关文章：