反应中材料ui表格单元的Onclick功能答案

【问题标题】：Onclick function for material ui tablecell in react反应中材料ui表格单元的Onclick功能
【发布时间】：2020-04-15 10:07:26
【问题描述】：

点击表格单元格（使用 Material UI 表格单元格）时，我需要显示弹出框。尝试将 onclick 函数添加到单元格，但无法将元素值传递给函数。我怎样才能做到这一点？下面是用于渲染表格的代码sn-p。

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

提前致谢。

【问题讨论】：

标签： reactjs react-native material-ui

【解决方案1】：

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

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

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

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

【讨论】：

谢谢..这就是我要找的。span>
@Dekel，是否可以使用 event.target 获取同一行中其他列的值？
一切皆有可能，但我真的不建议这样做。
在这种情况下合适的方法是什么？
我可能会使用材料表（这是一个为您提供此类功能的组件），并确保 onClick 我可以使用行对象访问行的数据（而不仅仅是使用 textContent 的单元格）。