0

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

我可以像这样更改行颜色，但我看不到更改所有其他行的颜色的有效方法。另外，使用 vanilla 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;
}
4

2 回答 2

0

您应该使用状态（ https://reactjs.org/docs/state-and-lifecycle.html ）跟踪当前双击的行，然后您可以在该组件中使用 selection 道具

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

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

于 2020-03-10T14:30:12.420 回答
0

我想到了。我将最后点击的行保留在我的组件状态中。然后，每当用户单击另一行时，我首先highlighted-row从该行中删除 css 类，然后使用新行作为当前突出显示的行来更新组件状态。然后我将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));
};
于 2020-03-12T10:21:26.220 回答