,可以通过以下步骤实现:
以下是一个简单的示例代码,演示了如何在React表中触发单元格onClick:
import React, { useState } from 'react';
const Table = () => {
const [selectedCell, setSelectedCell] = useState(null);
const data = [
['A1', 'B1', 'C1'],
['A2', 'B2', 'C2'],
['A3', 'B3', 'C3'],
];
const handleCellClick = (rowIndex, cellIndex) => {
setSelectedCell({ rowIndex, cellIndex });
};
return (
<table>
<tbody>
{data.map((row, rowIndex) => (
<tr key={rowIndex}>
{row.map((cell, cellIndex) => (
<td
key={cellIndex}
onClick={() => handleCellClick(rowIndex, cellIndex)}
style={{
background:
selectedCell &&
selectedCell.rowIndex === rowIndex &&
selectedCell.cellIndex === cellIndex
? 'yellow'
: 'white',
}}
>
{cell}
</td>
))}
</tr>
))}
</tbody>
</table>
);
};
export default Table;
在上面的示例中,我们使用useState钩子来创建一个名为selectedCell的状态变量,用于存储当前被点击的单元格的索引。在handleCellClick函数中,我们更新selectedCell状态,并将当前点击的单元格的索引存储在其中。在表格的渲染方法中,我们根据selectedCell状态来为被选中的单元格添加一个黄色的背景色。
这只是一个简单的示例,你可以根据实际需求进行修改和扩展。如果需要更复杂的表格功能,你可以考虑使用第三方的React表格组件库,如React-Table、Ant Design等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云