代码之家 › 专栏 › 技术社区 › JoSch

从Gia组件中删除bind-eventListener

event-listener javascript-events javascript

JoSch · 技术社区 · 5 年前

我对模块和组件以及框架的使用非常陌生。我正在努力与 Gia 开始吧。

我已经建立了一个 eventListener 它被添加到Gia的按钮中 mount() 方法,它绑定组件,以便访问组件的元素(更改类、样式等)。

如何删除 事件监听器 在 unmount() 方法?我知道这个问题是由于 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场景提供了解决方案,我无法将其应用于我的情况,因此提出了这个问题。)

0 回复 | 直到 5 年前

Nithish 5 年前

而不是定义 listener 内部变量 mount ,在构造函数中定义一个变量,并使用该变量添加或删除侦听器

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;

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前