Как я могу выполнить функцию с помощью 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.info('hello my old friend');
    }
  </script>`;
layer.bindPopup(textOnPopup);};

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

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

🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.


152
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);};

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