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

Я новичок в 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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Два решения:

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

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

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

Другие вопросы по теме