反应钩子设置触摸事件的开始位置答案

【问题标题】：React hooks set start position of touch event反应钩子设置触摸事件的开始位置
【发布时间】：2020-03-30 16:50:34
【问题描述】：

我在设置触摸事件的开始位置时遇到了困难。好像是定了一个位置，然后永远保持下去。

期望的行为是，如果我向上滑动，数字会增加一，如果我向下滑动，计数会减少一。

特别是这个功能不起作用：

  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

【问题讨论】：

您可能忘记保存您的代码和框代码，我在那里没有看到任何代码。我看到回调中又缺少一个依赖项，setTouchState
你可以尝试删除useCallback，好像你没有在那里添加所有需要的依赖，你不应该一直使用它。
抱歉重做沙盒 - 刚刚丢失了我所有的工作，但设法记住了它！

标签： reactjs react-hooks touch-event

【解决方案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>
  );
}

【讨论】：