Как остановить события JavaScript, когда компонент React отключается?

Question

Фон:
У меня есть веб-приложение, созданное с помощью React (v. 16.4.2 в настоящее время).Он будет использоваться только на сенсорном экране.Он состоит из тонны кнопок для выполнения каких-либо действий, и, поскольку все они сенсорные, я использую touchstart / touchend для выполнения этих действий.

Пример: Это базовый примеркак я использую события.Вы нажимаете кнопку, она устанавливает this.state.exampleRedirect в true, что, в свою очередь, вызывает повторный рендеринг компонента, а затем переходит на новую страницу (с использованием response-router-dom).Это все работает нормально.

<button
  type='button'
  onTouchStart={() => this.setState({ exampleRedirect: true })}
  className='o-button'>
  Open modal
</button>

Проблема:
Изначально я использовал onClick для обработки кнопок, но у меня были проблемы, потому что у моих пользователей толстые пальцы, а не много технических знаний,и когда они касались кнопки, они проводили пальцем по кнопке, и щелчок не срабатывал.OnTouchStart устраняет эту проблему, вызывая момент, когда происходит любое касание (перетаскивание, пролистывание, касание и т. Д.).

Проблема связана с OnTouchStart.Пользователь касается кнопки, он быстро меняет страницу (используя маршрутизатор) и повторно отображает новую страницу.Приложение быстрое, так что это почти мгновенно, что означает, что при загрузке новой страницы палец пользователя обычно остается на экране, таким образом, запускается ДРУГОЕ событие касания того, к чему он прикасается.Часто это еще одна кнопка маршрутизации, поэтому она срабатывает только через экраны, пока они не поднимут палец.

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

// example component
import React, { Component } from 'react';

class ExampleComponent extends Component {
  state = { buttonsDisabled: true }

  // after 300ms, the buttons are set to enabled (prevents touch events 
  // from firing when the page first loads
  componentWillMount() {
    timeoutId = setTimeout(() => {
      this.setState({ buttonsDisabled: false });
    }, 300);
  }

  render() {
    return (
      // button in render method
      <button
        disabled={this.state.buttonsDisabled}
        type='button'
        onTouchStart={() => this.setState({ exampleRedirect: true })}
        className='o-button'>
        Open modal
      </button>
    );
  }

Есть ли способ лучше?Или способ сделать то, что я делаю, но глобально, чтобы мне не нужно было добавлять этот код Jankity примерно в 100 компонентов?

Спасибо!

Answer 1

Вместо использования события onTouchStart, которое вызывается, когда точка касания помещается на сенсорную поверхность, и использования тайм-аута, что является небольшим взломом, вы должны использовать onTouchEnd, так как оно будет запущенокогда точка касания удаляется с сенсорной поверхности, тем самым гарантируя, что упомянутый случай не произойдет.

// example component
import React, { Component } from 'react';

class ExampleComponent extends Component {
  state = { buttonsDisabled: true }

  // after 300ms, the buttons are set to enabled (prevents touch events 
  // from firing when the page first loads
  componentWillMount() {
    timeoutId = setTimeout(() => {
      this.setState({ buttonsDisabled: false });
    }, 300);
  }

  render() {
    return (
      // button in render method
      <button
        disabled={this.state.buttonsDisabled}
        type='button'
        onTouchEnd={() => this.setState({ exampleRedirect: true })}
        className='o-button'>
        Open modal
      </button>
    );
  }