Попытка различить guish между событием перетаскивания и щелчком / касанием в карусели React. Можно ли улучшить мое решение? - PullRequest
Новая
       14

Попытка различить guish между событием перетаскивания и щелчком / касанием в карусели React. Можно ли улучшить мое решение?

0 голосов
/ 20 апреля 2020

Реагируйте на новичка ie здесь. Это функциональный компонент React, который отображает карусель (в частности, чисто-реагировать-карусель).

Итак, я начал с этого. Очень просто, конечно, я просто прикрепляю функцию к каждому слайду onClick): 

export default (props) => {
  const slides = [];
  for (let i = 0; i < NUM_OPPONENTS; i++) {
  slides.push(
     <Slide 
        onClick = {props.click}
     </Slide>
   );
}

Однако это нехорошо, потому что он запускает функцию, когда пользователь пытается перетащить слайд (в переместить карусель), и когда он собирается нажать на нее. Поэтому мне нужно было предотвратить срабатывание щелчка при перетаскивании. Заканчивается этим: 

export default (props) => {
  const slides = [];
  let pageX = 0;
  for (let i = 0; i < NUM_OPPONENTS; i++) {
  slides.push(
     <Slide 
        onMouseDown={(event) => {
          pageX = event.pageX;
        }}
        onMouseUp={(event) => {
          if (event.pageX - pageX < 2 && event.pageX - pageX > -2) {
            return props.click(event);
          }
        }}
     </Slide>
   );
}

Работает, но я получаю предупреждение от linter: Функция, объявленная в al oop, содержит небезопасные ссылки на переменную pageX. Я хотел бы знать, почему это небезопасно. Но, что гораздо важнее, я наткнулся на это решение методом проб и ошибок. Я пытаюсь понять, как и почему это работает, и если есть лучший / более ясный способ решить эту проблему.

...