Как применить onClick на тр кроме одного тд? - PullRequest
Новая
       5

Как применить onClick на тр кроме одного тд?

3 голосов
/ 10 июля 2020

У меня есть эта таблица в моем компоненте реакции. Мне нужно применить onClick ко всем <tr>, но нужно исключить последний столбец (<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>

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Вы можете использовать stopPropagation() при нажатии последней 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 onClick={e => e.stopPropagation()}>{activity.facility.name}</td>
</tr>
1 голос
/ 10 июля 2020

Если вы дадите этому последнему атрибуту td id, вы можете использовать значение event.target.id в обработчике onClick, чтобы ничего не делать, если оно соответствует этому 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

...