我可以在Cordova中运行Fastclick ReactJS吗

Question

fastclick是否可以与ReactJS的事件系统一起使用？通过Cordova在iOS或Android上运行时似乎不需要花时间。如果不是，是否还有另一种获得相同结果的方法。我的应用没有两次点击功能，因此，如果可能的话，我希望全面消除这种延迟。

Answer 1

我在Webpack项目中让FastClick与React一起工作。有些事情似乎有些挑剔，但大多数情况下都是有效的。（更新：只有一个模拟隐藏复选框的点击的拨动开关才是挑剔的-无论React如何，这都是一个问题）。这是我打开它的方式：

npm install -S fastclick

在main.jsx：

import FastClick from 'fastclick';

window.addEventListener('load', () => {

  FastClick.attach(document.body);

});

因此，即使您不使用Webpack或Browserify，我猜只要您可以运行load事件监听器，就可以了。

Answer 2

我们最近创建了一个与fastclick相似的React组件，除了它更简单并且需要手动回调。它很短，所以我将其发布在这里：

React.initializeTouchEvents(true)

var TouchClick = React.createClass({

  defaults: {

    touched: false,

    touchdown: false,

    coords: { x:0, y:0 },

    evObj: {}

  },

  getInitialState: function() {

    return this.defaults

  },

  handler: function() {

    typeof this.props.handler == 'function' && this.props.handler.apply(this, arguments)

  },

  getCoords: function(e) {

    if ( e.touches && e.touches.length ) {

      var touch = e.touches[0]

      return {

        x: touch.pageX,

        y: touch.pageY

      }

    }

  },

  onTouchStart: function(e) {

    this.setState({ 

      touched: true, 

      touchdown: true,

      coords: this.getCoords(e),

      evObj: e

    })

  },

  onTouchMove: function(e) {

    var coords = this.getCoords(e)

    var distance = Math.max( 

      Math.abs(this.state.coords.x - coords.x), 

      Math.abs(this.state.coords.y - coords.y) 

    )

    if ( distance > 6 )

      this.setState({ touchdown: false })

  },

  onTouchEnd: function() {

    if(this.state.touchdown)

      this.handler.call(this, this.state.evObj)

    setTimeout(function() {

      if ( this.isMounted() )

        this.setState(this.defaults)

    }.bind(this), 4)

  },

  onClick: function() {

    if ( this.state.touched )

      return false

    this.setState(this.defaults)

    this.handler.apply(this, arguments)

  },

  render: function() {

    var classNames = ['touchclick']

    this.props.className && classNames.push(this.props.className)

    this.state.touchdown && classNames.push('touchdown')

    return React.DOM[this.props.nodeName || 'button']({

      className: classNames.join(' '),

      onTouchStart: this.onTouchStart,

      onTouchMove: this.onTouchMove,

      onTouchEnd: this.onTouchEnd,

      onClick: this.onClick

    }, this.props.children)

  }

})

只需传递handlerprop作为回调并将内容包装在其中即可。这也适用于同时具有触摸和点击事件的系统（例如更新的Windows 8笔记本电脑）。例：

 <TouchClick handler={this.clickHandler} className='app'>

   <h1>Hello world</h1>

 </TouchClick>