双击更改React表的行颜色

Question

我在react应用程序中使用来自prime react的DataTable组件来创建数据表。双击时，我想更改行的颜色。但是，当单击另一行时，上一个高亮显示的行的颜色应改回原始颜色。我浏览了文档，但prime-react似乎没有提供API来更改行颜色。那么，实现这一目标的最佳方式是什么呢？

我可以这样改变行的颜色，但我看不出有什么有效的方法可以改变所有其他行的颜色。另外，使用普通JavaScript来修改DOM不是一个好的做法吗？

const highlightRow = event => {
event.originalEvent.currentTarget.classList.add('highlighted-row');
};
<DataTable
value={props.values}
onRowDoubleClick={event => highlightRow(event)}
>

CSS：

.highlighted-row {
background-color: blue;
}

Answer 1

您应该使用state跟踪当前双击的行(https://reactjs.org/docs/state-and-lifecycle.html)然后你可能可以在组件中使用选择道具

selection={this.state.selectedCar1} onSelectionChange={e => this.setState({selectedCar1: e.value})}

检查此示例https://www.primefaces.org/primereact/showcase/#/datatable/selection

Answer 2

我想明白了。我将上次单击的行保持在组件状态。然后，每当用户单击另一行时，我首先从该行中删除highlighted-rowCss类，然后用新行作为当前高亮显示的行来更新组件状态。然后，我将highlighted-row类添加到此行。

const [, highlightComponent] = useState(null);
const highlightComponentOnRowClick = row => {
const highlightedNode = row.originalEvent.currentTarget;
highlightComponent(previousHighlight => {
previousHighlight && previousHighlight.classList.remove("highlighted-row");
highlightedNode && highlightedNode.classList.add("highlighted-row");
return highlightedNode;
});
dispatch(setHighlightedComponent(row.data.component_id));
};