Событие касания газа с помощью React Hooks - PullRequest
Новая
       22

Событие касания газа с помощью React Hooks

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

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

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

Это довольно просто реализовать с помощью сенсорного события.

Здесь есть коды и коробка - я постарался сделать это как можно проще! Codesandbox

Когда у меня возникает проблема, событие происходит очень быстро, и это затрудняет посадку на определенное число. Было бы здорово ограничить событие, используя функцию газа loda sh, но здесь у меня возникают проблемы! Ничего не происходит!

Я пытался использовать useRef так: 

const throttledPosition = useRef(throttle(touchPosition => touchPosition, 200)).current;

Опять ничего не происходит.

1 Ответ

1 голос
/ 30 марта 2020

Часть 1. Обработчик событий регулирования

Ваша первая проблема вызвана тем, как вы используете _.throttle(), в идеале она должна быть обернута вокруг вашего обратного вызова обработчика событий.

Пожалуйста, просмотрите примеры в lodash.throttle() docs для справки по использованию.

Также взгляните на этот вопрос SO , он может предложить вам некоторые более глубокое понимание использования газа в React Hooks.

Главное изменение заключалось в том, чтобы обернуть обратный вызов события throttle. 

  const throttledSetPosition = throttle(event => {
    if (event.touches[0].clientY) {
      if (slider.current.contains(event.target)) {
        setTouchPosition(Math.round(event.touches[0].clientY));
      }
    } else {
      setTouchPosition(null);
    }
  }, 200);

  const handleTouchMove = useCallback(throttledSetPosition, [touchPosition]);

Часть 2 - Увеличение / Уменьшение значения

Чтобы достичь цели увеличения / уменьшения отображаемого значения, сначала нужно определить масштаб. Какое максимальное количество минут вы хотите отобразить? Давайте использовать 100, поскольку это легко понять.

То, что вам затем нужно вычислить, это процент от 100, к которому пользователь в данный момент касается, но обратный (поскольку ближе к вершине действительно ближе к 100, а дальше вниз ближе к 0 ).

Для этого вы можете использовать следующее: 

// Define the scale
const scale = 100;

// Extract needed variables from event touches array
const {
  clientY,
  target: { offsetHeight, offsetTop }
} = event.touches[0];

// Calculate the percentage
const percentage = (clientY - offsetTop) / offsetHeight;

// Make the calculation to be reversed by subtracting the percentage from the scale...
const currentValue = scale - (percentage * scale);

// Set the display value
setTouchPosition(Math.round(currentValue));

Я разбудил вашу песочницу здесь с вышеуказанными изменениями.

...