3

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

У меня есть 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
}

1
  • А где здесь родительский класс и дочерние классы? Я вижу только один класс RulesView. 18 мар 2020 в 5:11

2 ответа 2

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();
1
  • Спасибо за помощь! Как оказалось, все очень даже просто!)
    – alex
    18 мар 2020 в 13:09
1

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

//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>

1
  • Спасибо за ответ, он рабочий. Но в данном случае мне больше подходит другой вариант!
    – alex
    18 мар 2020 в 13:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.