событие mousemove, доступ к этому контексту

Если вы размещаете в IIS express и вы открываете проект в двух разных местах, вы можете увидеть эту ошибку.

Решение - перейти к Project/Properties/Web/Servers и нажать Create Virtual Directory.

2
задан pipou 15 January 2019 в 16:35
поделиться

2 ответа

Сохранение контекста класса в переменной вне привязки события. Затем создайте IIFE и свяжите его контекст с сохраненным.

componentDidMount() {
  const ctx = this;
  svgViewport.on('mousemove', function (d, i) {
    if (mouseIsOverStream) {
      let mousex = d3.mouse(this);
      mousex = mousex[0];
      !function () {
        // here I want this of the class instance context
        this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
      }.bind(ctx)();
    }
  });
}

Кроме того, это должно работать тоже:

componentDidMount() {
  svgViewport = ...;
  svgViewport.on('mousemove', (d, i) => {
    if (mouseIsOverStream) {
      let mousex = d3.mouse(svgViewport); // here
      mousex = mousex[0];
      this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
    }
  });
}
0
ответ дан migudev 15 January 2019 в 16:35
поделиться

Вы можете использовать функции стрелок, чтобы получить доступ к контексту this экземпляра и по-прежнему получать текущий элемент DOM. Для элемента DOM вы прибегаете к малоизвестному и часто пропускаемому третьему параметру прослушивателя событий. Поскольку у документов есть это (выделение мое):

указанный слушатель будет оценен для элемента, передавая текущий набор данных ( d ), текущий индекс ([117 ] i ) и текущая группа ( узлов )

Поскольку текущий индекс i является указателем на текущую группу nodes Вы можете ссылаться на текущий элемент DOM как nodes[i].

Ваш код становится:

svgViewport.on('mousemove', (d, i, nodes) => {
    if (mouseIsOverStream) {
        let mousex = d3.mouse(nodes[i]);  // get the current element as nodes[i]
        mousex = mousex[0];
        // this now refers to your instance
        this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
    }
});
0
ответ дан altocumulus 15 January 2019 в 16:35
поделиться
Другие вопросы по тегам:

Похожие вопросы: