Как отдельно обработать клик по всей строчке таблицы и отдельно по последней ячейке в React?

В React, чтобы отдельно обработать клик по всей строчке таблицы и отдельно по последней ячейке, можно использовать два разных обработчика событий.

1. Для обработки клика по всей строчке таблицы, можно использовать следующий подход:

- В компоненте, где рендерится таблица, создайте метод-обработчик события handleRowClick, который будет вызываться при клике на строчку таблицы.
- Передайте этот метод в компонент строки таблицы в качестве пропса или используйте его напрямую в компоненте строки.
- В компоненте строки таблицы, внутри элемента <tr>, добавьте атрибут onClick и передайте туда метод handleRowClick.

Например:

class Table extends React.Component {
  handleRowClick = () => {
    // обработка клика по всей строчке таблицы
  }
  
  render() {
    return (
      <table>
        <tbody>
          {data.map((row, index) => (
            <TableRow key={index} row={row} onClick={this.handleRowClick} />
          ))}
        </tbody>
      </table>
    );
  }
}

class TableRow extends React.Component {
  render() {
    const { row, onClick } = this.props;
    
    return (
      <tr onClick={onClick}>
        {row.map((cell, index) => (
          <td key={index}>{cell}</td>
        ))}
      </tr>
    );
  }
}

2. Для обработки клика по последней ячейке таблицы, можно использовать следующий подход:

- В компоненте строки таблицы, создайте метод-обработчик события handleLastCellClick, который будет вызываться при клике на последнюю ячейку.
- В компоненте таблицы, передайте этот метод в компонент строки таблицы в качестве пропса или используйте его напрямую в компоненте строки.
- В компоненте строки таблицы, внутри последней ячейки (<td>), добавьте атрибут onClick и передайте туда метод handleLastCellClick.

Например:

class TableRow extends React.Component {
  handleLastCellClick = () => {
    // обработка клика по последней ячейке
  }
  
  render() {
    const { row } = this.props;
    
    return (
      <tr>
        {row.map((cell, index) => (
          <td key={index} onClick={index === row.length - 1 ? this.handleLastCellClick : null}>{cell}</td>
        ))}
      </tr>
    );
  }
}

Таким образом, вы можете отдельно обрабатывать клик по всей строчке таблицы и клик по последней ячейке в React.