Функция Onclick для материала UI Tablecell в реакции

Question

У меня есть требование показывать всплывающие окна при нажатии на ячейку таблицы (используется ячейка таблицы Material UI). Пытался добавить функцию onclick в ячейку, но не смог передать значение элемента в функцию. Как мне этого добиться? Ниже приведен фрагмент кода, который использовался для визуализации таблицы.

<TableBody>
 {dataObject.map((data) => (
    <TableRow key={data.id}>
    <TableCell>
        <Button>
            {data.info}
        </Button>
    </TableCell>
    <TableCell>
        {data.request}
    </TableCell>
    </TableRow>
))}
</TableBody>        

Заранее спасибо.

Answer 1

Компонент <TableCell> в конечном итоге представляет собой тд / т в вашем html, поэтому к нему на самом деле не привязано значение (это не просто компонент реагирования, который вы можете просто использовать как значение или как вход элемент, значение которого вы можете использовать).

Что вы можете сделать, так это получить доступ к элементу innerHTML / textContent, чтобы получить доступ к содержимому ячейки с помощью самого события:

const handleCellClick = (e) => {
    console.log(e.target.textContent);
}

<TableCell onClick={handleCellClick}>{data.request}</TableCell>