Можно ли воспользоваться аргументом родительского класса в дочернем классе?

Question

Доброго времени суток!

У меня есть class, у которого есть определенный метод. В данном методе я ищу input, добавляю на него слушателя, и вызываю коллбэк (который, также, является методом моего класса), в котором должно происходить некоторое действие.

Суть в том, что я хочу переопределить данный коллбэк (прописать действие) через переменную, которая находится в отдельном модуле, а найденный input передать в качестве аргумента моего коллбэка. Как я не пытался выкрутиться, input все время undefind. Помогите, пожалуйта.

Ниже пример кода:

//rules.js
export default class RulesView {
  bind() {
    const userNameInput = this.element.querySelector(`.rules__input`);
    
    userNameInput.addEventListener(`keyup`, this.onKeyup);
  }
  
  onKeyup(userNameInput) {
  
  }
}

//view.js
import RulesView from './rules.js';

const rulesView = new RulesView();

rulesView.onKeyup = (userNameInput) => {
//здесь должны происходить действия с userNameInput, но он undefind
}

Answer 1

А почему бы просто не написать метод, который вернет ссылку на элемент?

export default class RulesView {
  this.element = null;
  this.bind();
  bind() {
    const userNameInput = this.element.querySelector(`.rules__input`);

    userNameInput.addEventListener(`keyup`, this.onKeyup);
  }

  onKeyup(userNameInput) {

  }
  getFieldLink () {
    return this.element.querySelector(`.rules__input`);
  }
}
let rule = new RulesView();
let field = rule.getFieldLink();

Answer 2

Можно сделать вот так.

//rules.js
export default class RulesView {
  bind() {
    const userNameInput = this.element.querySelector(`.rules__input`);

    userNameInput.addEventListener(`keyup`, () => {
      this.onKeyup(userNameInput);
    });
  }

  onKeyup(userNameInput) {

  }
}

//view.js
import RulesView from './rules.js';

const rulesView = new RulesView();

rulesView.onKeyup = (userNameInput) => {
  //здесь должны происходить действия с userNameInput, но он undefind
}

Работающий пример.

//rules.js
class RulesView {
  bind() {
    const userNameInput = document.querySelector(`.rules__input`);

    userNameInput.addEventListener(`keyup`, () => {
      this.onKeyup(userNameInput);
    });
  }

  onKeyup(userNameInput) {
    console.log('default event handler', userNameInput);
  }
}

//view.js
const rulesView = new RulesView();

rulesView.bind();

function redefine() {
  rulesView.onKeyup = (userNameInput) => {
    console.log('redefine event handler', userNameInput)
  }

}

<input class="rules__input">

<button onclick="redefine()">redefine</button>

БЛОГ НА HUSL

Можно ли воспользоваться аргументом родительского класса в дочернем классе?

Ответы (2 шт):