如何在除一个 td 之外的 tr 上应用 onClick？答案

【问题标题】：How to apply onClick on tr except one td?如何在除一个 td 之外的 tr 上应用 onClick？
【发布时间】：2020-10-31 12:30:49
【问题描述】：

我的反应组件中有这张表。我需要在所有<tr> 上应用onClick，但需要排除最后一列（<td>）。

有可能吗？

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, completeModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td>{activity.facility.name}</td>
</tr>

【问题讨论】：

你在最后一个td上试过onClick={e => e.stopPropagation()}吗？
@AnuragSrivastava 你成功了。它有效！！！

标签： javascript reactjs html-table

【解决方案1】：

如果你给最后一个td 一个id 属性，你可以在onClick 处理程序中使用event.target.id 值，如果它与id 匹配，则不执行任何操作，例如：

onClick={event => {
  if (event.target.id === 'someId') {
    return;
  }

  if (activeTab === "active") {
    this.setState({ activity, completeModal: true })
  }
  else {
    this.setState({ activity, showModal: true })
  }
}}

<td id={'someId'}>{activity.facility.name}</td>

演示：https://codesandbox.io/s/winter-frog-o9dxr

【讨论】：

我试过这个。我在event.target.id 中得到undefined
有意思，我刚刚在沙盒中测试了一下，得到了id
你能告诉我链接吗

【解决方案2】：

您可以在点击最后一个td时使用stopPropagation()：

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, completeModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td onClick={e => e.stopPropagation()}>{activity.facility.name}</td>
</tr>

【讨论】：