React中点击表格行内IconButton时如何获取report.id值？

你遇到的问题是因为Material-UI的IconButton并非表单输入类元素，它的value属性不会像普通<input>那样被事件对象捕获。这里有几种简单直接的方法获取report.id：

方法一：直接在onClick回调中传递id #

修改onClick的写法，直接把report.id作为参数传给处理函数：

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 onClick={() => onDeleteFavorite(report.id)}>
                <DeleteIcon />
            </IconButton>
        </td>
    )}
</tr>
))

对应的处理函数直接接收id参数：

const onDeleteFavorite = (reportId) => {
  // 这里直接使用reportId即可
  console.log('要删除的报表ID：', reportId);
  // 执行删除逻辑
};

方法二：利用data属性存储id #

给IconButton添加自定义data-id属性，然后在事件中通过currentTarget获取：

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 data-id={report.id} onClick={onDeleteFavorite}>
                <DeleteIcon />
            </IconButton>
        </td>
    )}
</tr>
))

处理函数中通过事件对象获取：

const onDeleteFavorite = (e) => {
  const reportId = e.currentTarget.dataset.id;
  // 注意：这里拿到的是字符串，如果需要数字类型可以转一下：parseInt(reportId)
  console.log('要删除的报表ID：', reportId);
  // 执行删除逻辑
};

方法三：使用bind绑定参数 #

通过bind把report.id绑定到处理函数的参数中：

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 onClick={onDeleteFavorite.bind(null, report.id)}>
                <DeleteIcon />
            </IconButton>
        </td>
    )}
</tr>
))

处理函数中第一个参数就是id，事件对象在第二个位置：

const onDeleteFavorite = (reportId, e) => {
  console.log('要删除的报表ID：', reportId);
  // 执行删除逻辑
};

其中方法一是最常用也最直观的写法，推荐优先使用。

内容的提问来源于stack exchange，提问作者flyfisher1952