Reactでスライド中の誤操作を防ぐ方法は何ですか？

1年 ago
桜, 春樹
1 minute

React内で、スクロール中の誤タッチを防ぐためにpreventDefault()メソッドを使用することができます。具体的な方法は以下の通りです：

  1. touchStartYは、タッチ開始時のY座標です。
  2. スクロール中
constructor(props) {
  super(props);
  this.touchStartY = 0;
  this.isScrolling = false;
}
  1. 次に、スライドが開始された際に、タッチイベントの縦座標値を記録します。
handleTouchStart = (event) => {
  this.touchStartY = event.touches[0].clientY;
};
  1. スライド中に、スライド距離が特定の閾値を超えているかどうかを判断し、超えている場合はデフォルトのスライド動作を阻止します。
handleTouchMove = (event) => {
  const touchCurrentY = event.touches[0].clientY;
  const touchDistanceY = touchCurrentY - this.touchStartY;
  
  if (Math.abs(touchDistanceY) > 10 && !this.isScrolling) {
    event.preventDefault();
    this.isScrolling = true;
  }
};
  1. タッチ開始 Y
  2. スクロール中
handleTouchEnd = () => {
  this.touchStartY = 0;
  this.isScrolling = false;
};
  1. renderメソッド内で、上記で定義したメソッドを適切なスライドイベントにバインドします。
render() {
  return (
    <div
      onTouchStart={this.handleTouchStart}
      onTouchMove={this.handleTouchMove}
      onTouchEnd={this.handleTouchEnd}
    >
      {/* 组件内容 */}
    </div>
  );
}

以上の方法を使用することで、スライド中の誤タッチ問題を防ぐことができます。

bannerAds