Question

我在设置触摸事件的开始位置时遇到困难。它似乎先设定了一个位置，然后一直保持下去。

理想的行为是，如果我向上滑动，数字将增加1，而如果我向下滑动，则计数将减少1。

特别是，此功能不起作用：

  const handleTouchMove = useCallback(
    (event) => {
      console.log(touchState.touchStartYPosition, event.touches[0].clientY, touchState.touchYPosition)
      if (touchState.isDragging === true && event.touches[0].clientY) {
        if (!touchState.touchStartYPosition) {
          setTouchState(prevTouchState => ({
            ...prevTouchState,
            touchStartYPosition: event.touches[0].clientY - 50
        }));
        } else {
          if (event.touches[0].clientY - touchState.touchStartYPosition >= 0) {
            setTouchState(prevTouchState => ({
              ...prevTouchState,
              touchYPosition: touchState.touchYPosition + 1
          }));
          }
        }
      }
}, [touchState.isDragging, touchState.touchYPosition]
  );

如何比较当前触摸位置和开始触摸位置？

New codeandbox

Answer 1

这有效-在handleTouchMove的末尾删除对touchYPosition的依赖关系会产生所需的行为。

import React, { useCallback, useState, useEffect, useRef } from "react";
import { throttle } from "lodash";
import "./touchSlider.css";

export default function TouchSlider() {
  const slider = useRef();
  const [touchState, setTouchState] = useState({
    touchStartYPosition: 0,
    isDragging: false,
    touchYPosition: 0
  });

  const handleTouchStart = useCallback(event => {
    setTouchState(prevState => ({ ...prevState, isDragging: true }));
  }, []);

  const handleTouchMove = useCallback(
    event => {
      console.log(
        touchState.touchStartYPosition,
        event.touches[0].clientY,
        touchState.touchYPosition
      );
      if (touchState.isDragging === true && event.touches[0].clientY) {
        if (!touchState.touchStartYPosition) {
          setTouchState(prevTouchState => ({
            ...prevTouchState,
            touchStartYPosition: event.touches[0].clientY
          }));
        } else {
          if (event.touches[0].clientY > touchState.touchStartYPosition) {
            console.log("IS GREATER");
            setTouchState(prevTouchState => ({
              ...prevTouchState,
              touchYPosition: touchState.touchYPosition + 1
            }));
          }
        }
      }
    },
    [
      touchState.isDragging,
      touchState.touchStartYPosition,

    ]
  );

  const handleTouchEnd = useCallback(
    event => {
      if (touchState.isDragging) {
        setTouchState(prevState => ({
          ...prevState,
          isDragging: false,
          touchStartYPosition: 0
        }));
      }
    },
    [touchState.isDragging, touchState.touchStartYPosition]
  );

  useEffect(() => {
    window.addEventListener("touchmove", handleTouchMove);
    window.addEventListener("touchend", handleTouchEnd);
    return () => {
      window.removeEventListener("touchmove", handleTouchMove);
      window.removeEventListener("touchend", handleTouchEnd);
    };
  }, [handleTouchMove, handleTouchEnd]);

  return (
    <div className="touchSlider">
      <div className="sliderBox" ref={slider} onTouchStart={handleTouchStart}>
        {touchState.touchYPosition}
      </div>
    </div>
  );
}

反应挂钩设置触摸事件的开始位置

1 个答案: