Вызов функции onClick React из html - PullRequest
Новая
       22

Вызов функции onClick React из html

0 голосов
/ 02 июля 2019

Я использую Bing Map с пользовательским информационным блоком. Информационный блок также содержит пользовательский значок закрытия, который я хочу выполнить функцию закрытия. Я уже пробовал несколько способов, но функция clearInfoBox не выполняется. 

clearInfoBox() {
   console.log("test");
}

var infoboxTemplate = 
 `<div style="margin-top:0px; margin-left:20px;">
    <a href="javascript:void(0)" onClick="{this.clearInfoBox}"><img style="float: right;" src="${closeIcon}"/></a>
  </div>`

this.centerOfSearchInfoBox = new window.Microsoft.Maps.Infobox(new window.Microsoft.Maps.Location(this.centerOfSearch.latitude, this.centerOfSearch.longitude), {
    htmlContent: infoboxTemplate,
  });

  this.centerOfSearchInfoBox.setMap(map);

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

Может быть, это поможет вам. Сначала в html onclick не onClick

var infoboxTemplate = 
 `<div style="margin-top:0px; margin-left:20px;">
    <a href="javascript:void(0)" onclick="onClickInfor()"><img style="float: right;" src="${closeIcon}"/></a>
  </div>`

и добавить onClickInfor метод 

constructor() {
  ...
  window.onClickInforBox = this.clearInfoBox.bind(this)
}

и удалить onClickInforBox, когда компонент размонтирован 

componentWillUnmount() {
  window.onClickInforBox = undefined
}
0 голосов
/ 02 июля 2019

Попробуйте изменить функцию clearInfoBox на константу. Таким образом, вам не нужно связывать его в конструкторе.

Затем передайте его как переменную вашей переменной шаблона.

Код должен выглядеть примерно так: 

clearInfoBox = () => {
   console.log("test");
}

const infoboxTemplate = (clearFn) => 
 `<div style="margin-top:0px; margin-left:20px;">
    <a href="javascript:void(0)" onClick={clearFn}><img style="float: right;" src="${closeIcon}"/></a>
  </div>`

this.centerOfSearchInfoBox = new window.Microsoft.Maps.Infobox(new window.Microsoft.Maps.Location(this.centerOfSearch.latitude, this.centerOfSearch.longitude), {
    htmlContent: infoboxTemplate(this.clearInfoBox),
  });

this.centerOfSearchInfoBox.setMap(map);

Кроме того, не используйте кавычки вокруг обработчиков onChange.

...