Onclick function for material ui tablecell in react

Question

I have a requirement to show popovers, when clicking on table cell (used Material UI table cell). Tried adding onclick function to cell, but not able to pass the element value to the function. How can I achieve this? Below is the code snippet which used to render table.

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

Thanks in advance.

Answer 1

该<TableCell>组件最终是 html 中的 td/th ，因此您实际上并没有附加值（它不像纯粹的 React 组件，您可以只使用值，也不像具有您可以访问的值的输入元素）。

您可以做的是访问元素的innerHTML/textContent以使用事件本身访问单元格的内容：

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

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