如何在 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>

Answer 2

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

如果您使用的是表面變量，那么它需要在模板文字中使用 $ 符號來指示表面是一個變量而不是結果字符串的一部分。