带触摸模拟器的Hammerjs无法在React中工作

Question

我一直在尝试使用React中的Hammerjs来测试和模拟触摸事件，但是浏览器和事件之间的行为极不一致。

我们来看一下简单的代码：

import React from 'react';
import PropTypes from 'prop-types';
import Hammer from 'hammerjs';
import touchEmulator from 'hammer-touchemulator';

function testTap() {
  console.log('test zoom');
}

function testPinch() {
  console.log('test pinch');
}

class PDF extends React.Component {
  constructor(props) {
    super(props);
      touchEmulator();
      ...
  }

  componentDidMount() {
    this.hammer = Hammer(this.canvas);
    this.hammer.on('tap', testTap);
    this.hammer.get('pinch').set({ enable: true });
    this.hammer.on('pinch', testPinch);
  }

  ...
  render() {
    return (
      <div>
        <canvas
          ref={(canvas) => { this.canvas = canvas; }}
        />
      </div>
      );
    }
  }

我添加了触摸仿真器，因此我可以测试捏缩放。

所以这是我的问题：

• 启用触控模拟器后，点按不起作用，但在Chrome和Firefox中无法正常工作
• 我尝试在Hammerjs's网站上进行缩放缩放，这适用于Firefox和Safari，但不适用于Chrome。当我在我的React应用程序中本地尝试时，它不适用于任何这些。

有没有人有任何想法？

Answer 1

有类似的问题，所以刷卡切换到react-swipeable，但react-hammerjs留下了水龙头。此外，在搜索解决方案时看到有人提到的一篇文章，自React 16.4以来某些功能被禁用，您可以尝试降级React版本，然后检查它是否是这种情况。