Реактивные зацепки устанавливают начальную позицию события касания - PullRequest
Новая
       5

Реактивные зацепки устанавливают начальную позицию события касания

0 голосов
/ 30 марта 2020

У меня проблемы с установкой начальной позиции сенсорного события. Кажется, он устанавливает одну позицию, а затем сохраняет ее навсегда.

Желаемое поведение состоит в том, что, если я проведу пальцем вверх, число увеличится на единицу, а если я проведу пальцем вниз, счет уменьшится на единицу.

В частности, эта функция не работает: 

  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]
  );

Как сравнить текущую позицию касания с начальной позицией касания?

Новый код и поле

1 Ответ

0 голосов
/ 30 марта 2020

Это работает - удаление зависимости от touchYPosition в конце handleTouchMove приводит к желаемому поведению. 

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>
  );
}
...