从 Gia 组件中移除绑定 eventListener

Question

我对模块和组件以及使用框架非常陌生。我正在尝试与 Gia 一起开始。

我设置了一个 eventListener，它被添加到 Gia 的 mount() 方法中的一个按钮，它绑定组件以便访问组件的元素（更改类、风格等）。

如何删除 unmount() 方法中的 eventListener？我知道问题是由 bind() 方法创建的新函数引用引起的。我只是不知道如何访问和删除它。

class navigation extends Component {
  //
  // Construct
  constructor(element) {
    super(element);
    //
    this.ref = {
      navButton: null,
      navLinks: [],
    };
  }
  //
  // Mount
  mount() {
    //
    // Listen for click
    var listener = this.handleClick.bind(this);
    this.ref.navButton.addEventListener("click", listener);
    //

  }
  //
  // Unmount
  unmount() {
    //
    // Stop listening for click
    this.ref.navButton.removeEventListener("click", listener);
  }
  //
  // Click-handlers
  handleClick() {
    this.element.classList.toggle("closed");
  }
}
//
// Export component
export default navigation;

（类似的答案为 React 场景提供了解决方案，我无法根据我的情况调整它们，因此提出这个问题。）

Answer 1

不要在 mount 中定义 listener 变量，而是在构造函数中定义一个变量，并使用它来添加或删除侦听器

class navigation extends Component {
  //
  // Construct
  constructor(element) {
    super(element);
    //
    this.ref = {
      navButton: null,
      navLinks: [],
    };
    this.listener = this.handleClick.bind(this);
  }

  // Mount
  mount() {
    this.ref.navButton.addEventListener("click", this.listener);
  }

  // Unmount
  unmount() {

    // Stop listening for click
    this.ref.navButton.removeEventListener("click", this.listener);
  }

  // Click-handlers
  handleClick() {
    this.element.classList.toggle("closed");
  }
}
//
// Export component
export default navigation;

希望这能解决您面临的问题。

使用箭头函数而不是使用 bind

的相同示例

class navigation extends Component {
  //
  // Construct
  constructor(element) {
    super(element);
    //
    this.ref = {
      navButton: null,
      navLinks: [],
    };
  }

  // Mount
  mount() {
    this.ref.navButton.addEventListener("click", this.handleClick);
  }

  // Unmount
  unmount() {

    // Stop listening for click
    this.ref.navButton.removeEventListener("click", this.handleClick);
  }

  // Click-handlers
  handleClick = () => {
    this.element.classList.toggle("closed");
  }
}
//
// Export component
export default navigation;

从 Gia 组件中移除绑定 eventListener

Remove bind eventListener from Gia component

javascript

event-listener

dom-events