双击更改 React 表的行颜色答案

【问题标题】：Change row color of React table on double click双击更改 React 表的行颜色
【发布时间】：2020-06-22 09:57:04
【问题描述】：

我在我的 React 应用程序中使用来自 prime-react 的 DataTable 组件来创建数据表。我想在双击时更改行的颜色。但是，当单击另一行时，前一个突出显示的行的颜色应更改回原始颜色。我浏览了文档，但 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;
}

【问题讨论】：

React 是一个声明性库，不是必须的。您应该保持行颜色的状态。所以在 rowDoubleClick 事件处理程序上你应该更新这个状态。

标签： javascript css reactjs primereact

【解决方案1】：

我想通了。我将最后点击的行保留在我的组件状态中。然后，每当用户单击另一行时，我首先从该行中删除 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));
};

【讨论】：

【解决方案2】：

您应该使用状态 (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

【讨论】：

我不能为此使用selection 道具，因为它不是真正的选择。事实上，我已经在使用selection prop 进行实际选择。就我而言，我只想在用户双击该行时显示该行的相应数据，但这并不意味着用户已选择该行。我的应用程序中的选择是通过单击相应的复选框来完成的。