Динамически генерируемые кнопки с прикрепленным событием onClick - PullRequest
Новая
       13

Динамически генерируемые кнопки с прикрепленным событием onClick

0 голосов
/ 20 сентября 2019

У меня проблемы с прикреплением события onclick к кнопке HTML5.Я пытаюсь сгенерировать ряд кнопок динамически, основываясь на параметре: 

    var buttons: { 
      'Save': () => console.log('Save'),
      'Edit': () => console.log('Edit'),
    };

и процессе генерации: 

private getButtons(): string {
  let buttons: string = '';
  Object.entries(this.buttons).map(([key, value]: [string, () => any]) => {
    buttons += ` <button onclick="${value}">${key}</button>`
  });

  return buttons;
}

Я пробовал много способов добавить эту функцию как onclick /Событие onClick безуспешно.Ничего не происходит, или я получил ошибку:

Uncaught SyntaxError: Операторам функции требуется имя функции.

Когда я ставлю точку останова внутри функции карты и вызываю value()он возвращает значения, как и ожидалось.

Я хотел бы получить кнопки с именем, равным конкретному ключу, и с событием onClick, которое вызовет функцию, переданную как значение в объекте выше.Что важно, я не могу использовать jQuery и другие библиотеки, поддерживающие dom.

1 Ответ

0 голосов
/ 21 сентября 2019

Я не уверен, почему это сложно?Если вы не используете ключевое слово this или не используете какой-либо тип 'string', первый параметр в этих сценариях будет объектом event.В качестве хорошей практики я больше не использую e (event только сейчас), поскольку я использую e в качестве переменной для других практик.

JavaScript 

function function_name(event) {console.log(event);}

HTML 

<button onclick="function_name(event);">test</button>

Мне еще предстоит найти достойный способ стандартизации addEventListener, поэтому многие люди недовольны использованием атрибутов событий (onclick=""), в которых вы нуждаетесьвыбрать свои сражения, сделав некоторые разумные предположения.

...