ReactJS Touch事件和iOS Safari

Question

我正在嘗試構建一個可滑動輪播的react組件。 這是針對移動設備的，因此觸摸是必須的。 這是我當前的設置：

1. 一個新的React類，其對象充滿共享變量，如下所示：

    var pmilla = React.createClass({ ppSlick: { touchStartVal: '', prevTouchVal: '', matrix: '', initSliderLeft: '', threshHold: 75, // number of pixels we need to travel before moving to next slide timestamp: '', slideTrack: '', // should be a jquery object viewPortWidth: '', offSets: '', disFromStart: '', isSwiping: false, currentSubPage: '', animType: '', transformType:'', transitionType:'', }, 

2. Touchstart處理程序：

    touchStartHandler: function(e){ this.ppSlick.touchStartVal = e.nativeEvent.touches[0]; this.ppSlick.prevTouchVal = e.nativeEvent.touches[0]; this.ppSlick.matrix = this.transMatrixToArray(this.ppSlick.slideTrack.css(this.ppSlick.transformType)); this.ppSlick.initSliderLeft = parseInt(this.ppSlick.matrix[4] , 10); }, 

3. Touchmove處理程序（這就是問題所在）：

    touchMoveHandler: function(e){ var touch = e.nativeEvent.touches[0]; this.ppSlick.disFromStart = e.nativeEvent.touches[0].pageX - this.ppSlick.touchStartVal.pageX; var dis = Number(e.nativeEvent.touches[0].pageX - this.ppSlick.prevTouchVal.pageX); console.log('from pp obj', this.ppSlick.prevStartVal); console.log('inside touchandler', touch); 

到現在為止還挺好。 在此屏幕截圖中可以看到，一切在桌面瀏覽器上都運行良好。 （這是兩個控制台日志的輸出；兩個pageX值之間的差異是我用來處理轉換的內容）

因此，所有這些工作到現在為止。 現在看看在iOS Safari上會發生什么：

他們是一樣的。 我嘗試使用不同的觸摸事件（nativeEvent與Synthetic），嘗試將touchStartVal和prevTouchVal變量放置在其他位置，但似乎無濟於事。 我對此一無所知。 讓我知道是否需要提供更多信息。

謝謝！

Answer 1

可能是iOS的Safari瀏覽器錯誤。

嘗試：

cursor: pointer;

更多信息：

http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

Answer 2

解決方案是不要對共享變量使用某些任意對象，而要使用setState（）。 我不能完全確定React在做什么，但是看起來我定義的全局對象一直被覆蓋。 使用組件狀態有效。

奇怪的是，先前的實現（對象）在桌面瀏覽器上可以運行，但在iOS Safari上無法運行。 仍然不確定為什么。