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

Posted 2023-03-31

【中文标题】Chrome 移动模拟器中的 ReactJS 升级破坏了触摸事件

【英文标题】：Touch Events Broken with ReactJS Upgrade in Chrome Mobile Emulator

【发布时间】：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 移动模拟器上运行它

【参考方案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 这样的第三方库。