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

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

in React my addEvent listener and remove event listener aren't working properly. Specifically, the removeEventListener is not working for the customCursorFollow.

ALSO: Is this the best way to add event and remove event listeners in React? with componentDidMount and componentWillUnmount?

Answer 1

With addEventListener and removeEventListener , one major requirement is that the function reference passed to addEventListener should be the same the one passed to removeEventListener .

Now when you use arrow functions the reference differs and hence the listener is not removed correctly.

Since you just need event to be passed you don't need a listener to be an arrow function.

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

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