typescript ผ่านองค์ประกอบที่แมปไปยัง Function onclick

Question

ฉันอยู่ในขั้นตอนเริ่มต้นของแอปพลิเคชัน typescript และเพื่อเป็นการพิสูจน์แนวคิดฉันต้องการเพียงแค่แจ้งเตือน ID ของแต่ละรายการเมื่อคลิกปุ่ม ฉันจะเพิ่ม item.ID ในฟังก์ชัน onclick Alert ด้านล่างได้อย่างไร?

<table style="background-color:#FFFFFF;width:100px;">
  {resolvedValue.map((item, index) => (
    <tr key={index}>
      <td>
      {item.id}
      </td>
      <td>
        <button onclick="javascript:alert('Adding {item.id} ');">Add</button>
      </td>
    </tr>
  ))}
</table>

อัปเดตคำตอบต่อไปนี้:

 <table style="background-color:#FFFFFF;width:100px;">
  {resolvedValue.map((item, index) => (
    <tr key={index}>
      <td>
      {item.id}
      </td>
      <td>
        <button onClick={() => alert('Adding')}>Add</button>

      </td>
    </tr>
  ))}
</table>

Answer 1

เพียงแค่ใช้onClickฟังก์ชันของ React ดูhttps://codesandbox.io/s/keen-driscoll-mx8dy

<table style={{ "background-color": "#FFFFFF", "width": "100px" }}>
  {resolvedValue.map((item, index) => (
    <tr key={index}>
      <td>
      {item.id}
      </td>
      <td>
        <button onClick={() => alert('Adding' + item.id)}>Add</button>
      </td>
    </tr>
  ))}
</table>