如何检测两个手指触摸：ReactJS

Question

我有touchMove事件处理程序。

我正在尝试访问事件对象或显示更具体的触摸次数。

<div className={"LeafletMap"} onTouchMove={(e) => this.handleMapMove(e)}  onTouchStart={this.handleMapTouch} >
....

然后我在处理程序方法

中访问事件

handleMapMove = (e) => {
   console.log(e);
   ...
};

在控制台中，我可以看到

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
[[Handler]]: Object
[[Target]]: SyntheticTouchEvent
[[IsRevoked]]: false

如何在示例中访问[[Target]] object，或者更具体一点，我需要通知用户使用两根手指移动地图而不是一根。

Answer 1

您可以使用触摸事件的touches属性，它将包含所有可用的触摸点。

像这样：

handleMapMove = (e) => {
    console.log(e.touches);
};

根据 MDN DOC ：

  

触摸列表，列出触摸点的所有触摸对象   目前与触摸表面接触，无论是否   不是他们已经改变了，或者他们的目标元素在touchstart上是什么   时间。

     

此属性为只读。

     

可以想到能够分开多少个单独的手指   被确定为触摸屏幕。

Answer 2

你可以像这样访问它：

let target = e.target || e.srcElement;

这将为您提供常规的DOMNode。

您可以在其上调用常规DOMNode函数，因此以下内容将返回目标节点的id：

target.getAttribute('id')

查看文档：{​​{3}}

根据您的评论进行编辑

获取点击次数可以节省React组件状态中的点击次数并使用该次数。

看看下面的例子：

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
      show: true
    };
  }

  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
  DecreaseItem = () => {
    this.setState({ clicks: this.state.clicks - 1 });
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
        <button onClick={this.IncrementItem}>Click to increment by 1</button>
        <button onClick={this.DecreaseItem}>Click to decrease by 1</button>
        <button onClick={this.ToggleClick}>
          { this.state.show ? 'Hide number' : 'Show number' }
        </button>
        { this.state.show ? <h2>{ this.state.clicks }</h2> : '' }
      </div>
    );
  }
}

我从中获取：target - mozilla

基于通过评论添加的更多信息..

您似乎想要获得显示屏上的手指数量，您不需要目标事件，因为您需要“medium.com”。

要检查两根手指是否已被点击，您可以使用以下代码：

handleMapMove = (e) => {
   if(e.touches.length == 2){
     console.log("yay, two finger press")
   }
};