打字稿将映射元素传递给函数 onclick [英] Typescript pass mapped element to Function onclick

问题描述

我正处于 Typescript 应用程序的开始阶段，作为概念证明，我希望在单击按钮时简单地提醒每个项目的 ID.如何将 item.ID 添加到下面的 onclick Alert 功能中?

I am at the beginning stage of a Typescript application, and as a proof of concept I wish to simply alert the ID of each item on a button click. How can I add item.ID to the onclick Alert function below?

<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>

推荐答案

只需使用 React 的 onClick 函数即可.参见 https://codesandbox.io/s/keen-driscoll-mx8dy

Just use React's onClick function. See 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>

这篇关于打字稿将映射元素传递给函数 onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！