javascript - 如何在 React js 中的模板文字中调用 onclick 函数

Question

请帮助我在 React JS 的模板文字中编写点击函数。通过单击模板文字中的按钮，我需要调用 React 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")
  }

Answer 1

调用函数时去掉$符号即可生效

<button onclick={()=> ViewDetails(surface)}>View</button>