Question

componentDidMount() {
      document.addEventListener('mousemove', (e) => this.customCursorFollow(e));
      document.addEventListener('click', this.customCursorClick);
  }

  componentWillUnmount() {
      document.removeEventListener('mousemove', (e) =>
        this.customCursorFollow(e)
      );
      document.removeEventListener('click', this.customCursorClick);
  }

  customCursorFollow(e) {
    const cursor = document.querySelector('.cursor');
    cursor.setAttribute(
      'style',
      'top: ' + (e.pageY - 20) + 'px; left: ' + (e.pageX - 20) + 'px;'
    );
  }

  customCursorClick() {
    const cursor = document.querySelector('.cursor');
    cursor.classList.add('expand');

    setTimeout(() => {
      cursor.classList.remove('expand');
    }, 500);
  }

在React中，我的addEvent侦听器和remove事件侦听器无法正常工作。具体来说，removeEventListener不适用于customCursorFollow。

ALSO：这是在React中添加事件和删除事件侦听器的最佳方法吗？与componentDidMount和componentWillUnmount？

Answer 1

对于addEventListener和removeEventListener，一个主要要求是传递给addEventListener的函数引用应该与传递给removeEventListener的函数引用相同。

现在，当您使用箭头功能时，引用会有所不同，因此无法正确删除侦听器。

因为您只需要传递事件，所以不需要将侦听器用作箭头函数。

componentDidMount() {
      document.addEventListener('mousemove', this.customCursorFollow);
      document.addEventListener('click', this.customCursorClick);
  }

  componentWillUnmount() {
      document.removeEventListener('mousemove', this.customCursorFollow);
      document.removeEventListener('click', this.customCursorClick);
  }

在React中使用componentDidMount和componentWillUnmount添加和删除事件侦听器

1 个答案: