单击行中的按钮时，从映射表数组中获取反应数据

Question

我在 React SPA 中有一个数据表。我正在使用 Material-UI IconButton 组件来允许用户删除报告列表中的一行。

latestReports.map((report) => (
<tr key={report.id}>
    <td>{report.author}</td>
    <td className="report-date-col">{report.post_date}</td>
    <td>{report.location}</td>
    <td className="report-body" dangerouslySetInnerHTML={{ __html: report.body }}></td>
    {props.canDelete && (
        <td>
            <IconButton value={report.id} onClick={onDeleteFavorite}>
                <DeleteIcon />
            </IconButton>
        </td>
    )}
</tr>

））

我想在onDeleteFavorite函数中使用report.id值。但是，传递给处理程序的事件似乎没有我通常与输入 HTML 元素一起使用的 e.target.value 属性。

如何获取report.id值？

谢谢，迈克

Answer 1

您正在使用 IconButton 组件，并尝试在单击按钮时将 report.id 值传递给 onDeleteFavorite 函数。但是，Material-UI IconButton 组件没有 value 属性，并且传递给 onClick 处理程序的事件对象与从常规 HTML 输入元素获取的事件对象不同。相反，您可以简单地将report.id直接传递给您的onDeleteFavorite处理程序。

<IconButton onClick={() => onDeleteFavorite(report.id)}>
  <DeleteIcon />
</IconButton>

Answer 2

好吧，我的错。

我的标准做法是在我编写的任何查询中包含主表的 id，并对 RESTful 服务中的所有查询使用带有动态 where 子句的标准查询。但是，我需要将结果集限制为仅给定用户的最新结果，并且对某些列有一些独特的格式需求。所以我没有使用标准查询并且忘记将id添加到结果集中。因此，report.id 是“未定义”的，因为它不存在。

Nazrul 建议的方法也正是我所期望的。这是我添加 DeleteIcon 元素时第一次剪辑时所写的内容。

这证明，即使是拥有数十年经验的人，当没有其他团队成员进行健全性检查时，也会犯新手错误。

谢谢，纳兹鲁尔。你的回答让我重新评估了我的前提，因为它让我们两个人认为这应该可行。

迈克