Как вызвать функцию onclick внутри литерала шаблона в React js

Пожалуйста, помогите мне написать функцию щелчка в литералах шаблона в реакции js. Нажав кнопку в литерале шаблона, мне нужно вызвать другую функцию в реакции js.

  addPopupToLayer = (surface, layer) => {
  const { surface_type: { name, color } } = surface;
  const customPopup = `
   <div class=${styles.tooltipHeader}>
      <h4>${surface.name}</h4>
      <button onclick=${()=> this.viewDetails(surface)}>View</button>
    </div>   
    <p>${name}</p>
  `;
  const customOptions = { className: styles.tooltip, width: '200' };
  const customlayer = layer.bindPopup(customPopup ,customOptions );

  customlayer.setStyle({
     fillColor: color,
     color,
     opacity: 1,
     fillOpacity: 0.48
  });
  return customlayer;
};


 viewDetails = (surface) => {
   console.log("View Details is Called")
  }

reactjs javascript template-literals
person Pavan Kusunuri    schedule 10.01.2020    source источник
comment
onclick={()=› ViewDetails(surface)} удалить $ с начала   -  person Amit Chauhan    schedule 10.01.2020
comment
также onclick должен быть onClick   -  person shahnshah    schedule 10.01.2020
comment
@AmitChauhan Спасибо за ответ, когда я удалил $ с самого начала. На кнопке отображаются ViewDetails (поверхность). Он рассматривает все как строку   -  person Pavan Kusunuri    schedule 10.01.2020
comment
@shahnshah Спасибо за ответ, я попробовал ваше предложение, но оно не работает. Я имею в виду, что событие onClick не отвечает   -  person Pavan Kusunuri    schedule 10.01.2020
comment
@PavanKusunuri Вам нужно удалить $ с самого начала, это правильно. Но вы должны добавить один $ для поверхностной переменной.   -  person fjplaurr    schedule 10.01.2020
comment
@PavanKusunuri, не связывающий функцию, иногда создает эту проблему, вы пытались связать ее вот так this.ViewDetails = this.ViewDetails.bind(this) в конструкторе   -  person shahnshah    schedule 10.01.2020
comment
@shahnshah Я привязал эту функцию в конструкторе так же, как вы упомянули. все равно не работает.   -  person Pavan Kusunuri    schedule 10.01.2020
comment
@PavanKusunuri Просто из любопытства не следует ли называть эту функцию this.ViewDetails(surface) начинаться с нижнего регистра alpha?   -  person shahnshah    schedule 10.01.2020
comment
@shahnshah это опечатка, только что отредактированная, но я попытался правильно вызвать функцию   -  person Pavan Kusunuri    schedule 10.01.2020

Ответы (2)


arrow_upward
2
arrow_downward

уберите символ $ при вызове функции, все будет работать

<button onclick={()=> ViewDetails(surface)}>View</button>
person bajran    schedule 10.01.2020
comment
Можно ли вызвать функцию, используя это ключевое слово, которое я забыл опубликовать только что отредактированное - person Pavan Kusunuri; 10.01.2020
comment
если функция в той же области, как если бы вы определили эту функцию в том же классе, вы можете использовать this.ViewDetails - person bajran; 10.01.2020
comment
обе функции находятся в одном компоненте, но по-прежнему не вызывают другую функцию - person Pavan Kusunuri; 10.01.2020
comment
Есть ли способ преобразовать мой строковый литеральный код в код jsx, чтобы я мог связать эту функцию - person Pavan Kusunuri; 10.01.2020

arrow_upward
0
arrow_downward 

const customPopup = 
`<div class=${styles.tooltipHeader}>
  <h4>${surface.name}</h4>
  <button onClick={()=> ViewDetails(${surface})}>View</button>
</div>   
<p>${name}</p>`;

Если вы используете переменную поверхности, то ей нужен символ $ в литерале шаблона, чтобы указать, что поверхность является переменной, а не частью результирующей строки.

person fjplaurr    schedule 10.01.2020
comment
Можно ли вызвать функцию, используя это ключевое слово, которое я забыл опубликовать только что отредактированное - person Pavan Kusunuri; 10.01.2020
comment
Ответы только на код редко бывают полезными. Пожалуйста, прокомментируйте свой код или объясните, почему это решение вопроса. - person RyanNerd; 10.01.2020