Я новичок в Electron + Typescript, так что поддержите меня, пожалуйста.
В настоящее время я просто тестирую, что я могу сделать внутри Electron.
Проблема: я хочу манипулировать элементами DOM вне средства визуализации. Я передаю кнопку, в которую я добавляю Eventlistener в качестве параметра функции в test.js. Этот Evenlistener прослушивает событие «щелчка», которое сообщает console.info о том, что кнопка была нажата. Это работает отлично.
Теперь я добавляю текстовое поле. Я также передаю его как параметр и сохраняю ссылку на него в тесте. При щелчке вызывается функция, которая использует эту ссылку на textArea для console.info текста textArea.
Проблема: ссылка textArea определена в функции, в которую я добавляю прослушиватель событий, но вне этой функции она не определена. Почему и что я могу сделать, чтобы это исправить?
рендерер.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.info(testArea);
testInstance.addEventListenerToButton(testButton, testArea);
test.ts
export class test{
textArea;
addEventListenerToButton(toAddTo, textArea)
{
// Defined
console.info(textArea);
this.textArea = textArea;
// Defined
console.info(this.textArea);
toAddTo.addEventListener('click', this.showTheText);
// Defined
console.info(this.textArea)
}
showTheText()
{
// Undefined
console.info(this.textArea);
console.info(this.textArea.value);
}
}
Expected: showTheText()
либо работает, либо выдает ошибку о
textArea.value
Unexpected: The error is textArea undefined:
Uncaught TypeError: Cannot read property 'value' of undefined at HTMLButtonElement.test.showTheText
Оказывается, это справочная «ошибка» (скорее причуда), вызванная самим Javascript.
Ссылка на this
изменяется, когда функция вызывается Eventlistener, в результате чего this
указывает на элемент HTML, а не на скрипт. Поэтому, очевидно, он не может найти ссылку на ранее сохраненную переменную, в результате чего все эти вызовы будут undefined
, поскольку в HTML-элементе просто нет такой переменной.
Два решения:
1) И мой предпочтительный: используйте функции стрелок в Eventlistener, которые устанавливают строгий контекст для this
, решая проблему.
toAddTo.addEventListener('click', () => { this.showTheText(); });
2) Привязать контекст к функции. Не знаю, как это работает, но если хотите, погуглите.