Сохранение ссылок DOM вне класса рендерера

Question

Я новичок в Electron + Typescript, так что терпите меня, пожалуйста.

В настоящее время я просто проверяю, что я могу сделать внутри Electron

Проблема: я хочу манипулировать элементами DOM вне рендера. Я передаю кнопку, к которой добавляю Eventlistener, в качестве параметра функции в test.js. Этот Evenlistener слушает событие 'click', которое будет console.log, что кнопка была нажата. Это прекрасно работает.

Теперь я добавляю Textarea. Я передаю его как параметр и сохраняю ссылку на него в тесте. При щелчке вызывается функция, которая использует эту ссылку на textArea для console.log текста textArea.

Проблема: ссылка textArea определена в функции, в которую я добавляю обработчик событий, но вне этой функции она не определена. Почему и что я могу сделать, чтобы это исправить?

renderer.ts

import { test } from "./test";

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

let testInstance = new test();
let testButton = document.getElementById("test");
let testArea = document.getElementById("texttest");

console.log(testArea);

testInstance.addEventListenerToButton(testButton, testArea);

test.ts

export class test{

    textArea;

    addEventListenerToButton(toAddTo, textArea)
    {
        // Defined
        console.log(textArea);
        this.textArea = textArea;
        // Defined
        console.log(this.textArea);
        toAddTo.addEventListener('click', this.showTheText);
        // Defined
        console.log(this.textArea)
    }

    showTheText()
    {
        // Undefined
        console.log(this.textArea);
        console.log(this.textArea.value);
    }
}

Expected: showTheText() либо работает, либо выдает ошибку о

textArea.value

Неожиданно: ошибка textArea undefined:

Uncaught TypeError: Невозможно прочитать свойство 'значение' из неопределенного на HTMLButtonElement.test.showTheText

Answer 1

Оказывается, что это ссылка «ошибка» (более странная), вызванная самим Javascript.

Ссылка this изменяется, когда функция вызывается Eventlistener, вызывая thisуказать на элемент HTML вместо сценария.Следовательно, очевидно, что он не может найти ссылку на ранее сохраненную переменную, в результате чего все эти вызовы равны undefined, поскольку в HTML-элементе просто нет такой переменной, как эта.

Два решения:

1) И мой предпочтительный вариант: использовать функции стрелок на Eventlistener, который устанавливает строгий контекст для this, решая проблему

 toAddTo.addEventListener('click', () => { this.showTheText(); });

2) Привязать контекст к функции.Не уверен, как это работает, но есть, если вы хотите Google это