改变<tr>的背景色与useRef反应
改变<tr>的背景色与useRef反应
提问于 2021-04-22 15:07:29
我在react中创建了一个普通的动态表(而不是使用)。我想更改单击行的背景色。我在表中添加了ref :但我无法访问children ()。
如何在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;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-22 15:18:03
您可以做的最简单的解决方案是将单击行的索引保存在状态中，并在循环槽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>
))}
...
);
};Stack Overflow用户
发布于 2021-04-22 15:15:04
为此目的使用裁判最有可能是一种过度杀戮。相反，我建议您使用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，但这说明了这个想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67215963
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号