В React, чтобы отдельно обработать клик по всей строчке таблицы и отдельно по последней ячейке, можно использовать два разных обработчика событий.
- Для обработки клика по всей строчке таблицы, можно использовать следующий подход:
- В компоненте, где рендерится таблица, создайте метод-обработчик события
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> ); } }
- Для обработки клика по последней ячейке таблицы, можно использовать следующий подход:
- В компоненте строки таблицы, создайте метод-обработчик события
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.