使用 <tr> useRef 更改 in 反应的背景颜色

Question

我在react中创建了一个普通的动态表(不使用react表(。我想更改单击的行的背景颜色。我在表中添加了参考：但我无法接触到孩子们。

如何在react中通过表中的id更改单击行的样式？

import React, { useEffect, useRef } from "react";
import "./TableBox.css";
const TableBox = ({ table_data }) => {
const myTable = useRef(null);
useEffect(() => {
console.log("myTable", myTable.current);
});
const handlerRowClicked = (event) => {
// console.log('clicked')
// myTable.current.backgroundColor='blue'
};
return (
<div>
<table ref={myTable}>
<thead>
<tr>
{Object.keys(table_data[0]).map((title) => (
<th key={title}>{title}</th>
))}
</tr>
</thead>
<tbody>
{table_data.map((row, index) => (
<tr key={index} id={index} onClick={handlerRowClicked}>
{Object.keys(row).map((key) => (
<td key={row[key]}>{row[key]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
export default TableBox;

Answer 1

为此目的使用refs很可能是过度杀伤。相反，我建议您使用useState，并附加className或style。

例如：

import React, { useEffect, useRef } from 'react'
import './TableBox.css'
const TableBox = ({ table_data }) => {
const [selectedRow, setSelectedRow] = useState(-1);
...
const handlerRowClicked = useCallback((event) => {
// if you insist to use `id`
const { id } = event.currentTarget;
setSelectedRow(id);
}, [])
...
<table>
...
<tr onClick={handlerRowClicked} className={selectedRow === index ? 'selected: ''}>

关于如何处理className，有一些更好的实践，但这表明了这个想法。

Answer 2

您可以做的最简单的解决方案是将单击行的索引保存在状态中，并在通过table_data循环时将其用作条件。

const TableBox = ({ table_data }) => {
const myTable = useRef(null);
const [rowIndexClicked, setRowIndexClicked] = useState(null);
useEffect(() => {
console.log("myTable", myTable.current);
});
const handlerRowClicked = (rowIndex) => (event) => {
if (rowIndexClicked !== rowIndex) {
// handle if user clicks again the same row
setRowIndexClicked(rowIndex);
} else {
setRowIndexClicked(null); // set clicked row to null if same row is selected
}
};
return (
...
{table_data.map((row, index) => (
<tr
key={index}
id={index}
className={rowIndexClicked === index ? "clicked-class" : ""}
onClick={handlerRowClicked(index)}
>
{Object.keys(row).map((key) => (
<td key={row[key]}>{row[key]}</td>
))}
</tr>
))}
...
);
};

使用useRef不会给你任何优势。您可以将单击的元素存储在其中，但并没有理由不采用最简单的方法。

解决方案2

如果你仍然想从点击的元素本身获取id，你可以使用从点击事件中固有的event：

const TableBox = ({ table_data }) => {
const myTable = useRef(null);
const [rowIndexClicked, setRowIndexClicked] = useState(null);
useEffect(() => {
console.log("myTable", myTable.current);
});
const handlerRowClicked = (event) => {
const { id } = event.currentTarget;
if (rowIndexClicked !== id) {
// handle if user clicks again the same row
setRowIndexClicked(id);
} else {
setRowIndexClicked(null); // set clicked row to null if same row is selected
}
};
return (
...
{table_data.map((row, index) => (
<tr
key={index}
id={index}
className={rowIndexClicked === index ? "clicked-class" : ""}
onClick={handlerRowClicked}
>
{Object.keys(row).map((key) => (
<td key={row[key]}>{row[key]}</td>
))}
</tr>
))}
...
);
};