Я использую .bind(это), но он остается неопределенным для импортированной функции? Javascript Реагирует

#javascript #reactjs #react-class-based-component

Вопрос:

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

Первый журнал возвращает это правильно, но по какой-то причине журнал изнутри handleSelectorMouseDown возвращает «неопределенный», даже если я использую .bind(это)

1. Пожалуйста, не показывайте фотографии кода. Включите фактический код в свой вопрос.

2. Вы неправильно используете привязку, вам нужно сначала bind , тогда call в вашем случае сценарий будет handleSelectorMouseDown.bind(this)(e) , хотя мне не нравится такой подход, я бы создал привязанную ссылку, например const onSelectorMouseDown = handleSelectorMouseDown.bind(this) , вместо этого, а затем позвонил onSelectorMouseDown(e)

Ответ №1:

Попробуйте это:

handleSelectorMouseDown.bind(this)(e)

Это сначала свяжет импортированную функцию с правильной областью действия, а затем выполнит функцию.

Другой вариант-привязать функцию в конструкторе класса и использовать ее позже:

 class MyComponent {
    constrctor() {
      this.handleSelectorMouseDown = handleSelectorMouseDown.bind(this);
    }
}

Теперь вам просто нужно позвонить this.handleSelectorMouseDown(e)

Ответ №2:

Вы используете bind неправильно, вам нужно сначала bind , тогда call я бы создал ссылку на уровне класса для ваших связанных обработчиков:

 constructor() {
  this.onSelectorMouseDown = handleSelectorMouseDown.bind(this);
}

тогда вы можете называть их так, как вам нравится:

 this.onSelectorMouseDown(e);