Как я могу выполнить функцию с помощью onclick в NextJs?

Я сейчас работаю над NestJS-проектом, но я только начинающий. Мое Web-приложение должно отображать leaflet-карту с кликабельными плитками. Для каждой плитки я хочу отобразить кнопку, которая при нажатии запускает функцию. К сожалению, теги, похоже, не работают. Как мне заставить функцию работать с onclick? Есть ли другой вариант написать это? Заранее большое спасибо!

мой код:

const onEachSurface = (surface, layer) => {
const textOnPopup =
  surface.properties.kachel + //here I display the number of the selected tile
  ' ' +
  `<button onclick = "addToCart()" class="bg-white
   hover:bg-gray-100 text-gray-800 font-semibold 
   py-2 px-4 border-gray-400 rounded shadow"
   >Add to cart</button>
  <script type="text/javascript">
    function addToCart() {
      console.log('hello my old friend');
    }
  </script>`;
layer.bindPopup(textOnPopup);};

на front-end это выглядит так: click here to see screenshot

здесь вы можете увидеть сообщение об ошибке от NextJs. Текущая функциональность заключается в том, что можно нажать на плитку, и появится всплывающее окно с номером плитки. Кнопка должна выполнять простую функцию, но NextJs не знает этой функции. В коде номер рядом с кнопкой представлен как "surface.properties.kachel" (JSON-файл загружается в фоновом режиме)

Вы вызываете функцию сразу, а не передаете ее как ссылку onclick. Кроме того, вам следует по возможности избегать инлайн JS и использовать вместо этого слушатели событий. bindPopup принимает HTML-элемент, поэтому вам не нужно строчить HTML: создайте свой элемент с помощью document.createElement и т.д., что позволит вам иметь доступ к узлам, к которым вы хотите привязать ваши слушатели событий.

Terry 12.09.2022 14:27
Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
3
1
152
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я изменил свой код на этот:

const onEachSurface = (surface, layer) => {
const div = document.createElement('div');
const text = surface.properties.kachel;
const space = ' ';
const buttonAddToCart = document.createElement('button');
buttonAddToCart.innerHTML = 'add to cart';
buttonAddToCart.data = surface.properties.kachel;
buttonAddToCart.className =
  'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border-gray-400 rounded shadow';
buttonAddToCart.onclick = function () {
  addToCart();
};
div.append(text);
div.append(space);
div.append(buttonAddToCart);

layer.bindPopup(div);};

Теперь все работает! Спасибо еще раз Терри :)

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