fastclick是否可以與ReactJS的事件系統(tǒng)一起使用？通過Cordova在iOS或Android上運行時似乎不需要花時間。如果不是，是否還有另一種獲得相同結(jié)果的方法。我的應(yīng)用沒有兩次點擊功能，因此，如果可能的話，我希望全面消除這種延遲。
3 回答
守候你守候我
TA貢獻1802條經(jīng)驗 獲得超10個贊
我在Webpack項目中讓FastClick與React一起工作。有些事情似乎有些挑剔，但大多數(shù)情況下都是有效的。（更新：只有一個模擬隱藏復(fù)選框的點擊的撥動開關(guān)才是挑剔的-無論React如何，這都是一個問題）。這是我打開它的方式：
npm install -S fastclick
在main.jsx：
import FastClick from 'fastclick';
window.addEventListener('load', () => {
FastClick.attach(document.body);
});
因此，即使您不使用Webpack或Browserify，我猜只要您可以運行l(wèi)oad事件監(jiān)聽器，就可以了。
大話西游666
TA貢獻1817條經(jīng)驗 獲得超14個贊
我們最近創(chuàng)建了一個與fastclick相似的React組件，除了它更簡單并且需要手動回調(diào)。它很短，所以我將其發(fā)布在這里：
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作為回調(diào)并將內(nèi)容包裝在其中即可。這也適用于同時具有觸摸和點擊事件的系統(tǒng)（例如更新的Windows 8筆記本電腦）。例：
<TouchClick handler={this.clickHandler} className='app'>
<h1>Hello world</h1>
</TouchClick>
添加回答
舉報
0/150
提交
取消