问如何在响应组件卸载时停止JavaScript事件？
EN

Stack Overflow用户

提问于 2018-09-25 06:54:01

回答 1查看 391关注 0票数 0

背景：

我有一个用React构建的web应用程序(目前为16.4.2节)。它只会在触摸屏上使用。它是由大量的按钮组成的，因为它都是触摸的，所以我使用touchstart/touchend来处理这些操作。

示例：--这是我如何使用事件的基本示例。单击一个按钮，它将this.state.exampleRedirect设置为true，这反过来使组件重新呈现，然后转到新页面(使用router)。一切都很顺利。

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

有更好的办法吗？或者做我正在做的事情，但在全球范围内，这样我就不必在大约100个组件中添加这个jankity代码了吗？

谢谢!

javascript

reactjs

touch

touchstart

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-25 07:57:42

与其使用当触点放置在触摸面上时触发的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>
    );
  }