Question

请帮助我在react js中使用模板文字编写on click函数。通过单击模板文字中的按钮，我需要在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>`;

如果您使用的是Surface变量，则它在模板文字中需要$符号，以指示Surface是变量，而不是结果字符串的一部分。

如何在React js中的Template文字内部调用onclick函数

2 个答案: