Javascript 双击时更改反应表的行颜色

我正在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)}
   >

---

您应该使用状态（）跟踪当前双击的行 然后，您可能可以在该组件中使用选择道具

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

---

检查一下这个例子，我明白了。我将最后单击的行保持在组件状态。然后，每当用户单击另一行时，我首先从该行中删除突出显示的行css类，然后用新行作为当前突出显示的行更新组件状态。然后，我将突出显示的

行

类添加到此行

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));
};

---

React是一个声明性库，不是必需的。您应该保持行颜色的状态。因此，在rowDoubleClick事件处理程序上，您应该更新此状态。我不能对此使用

selection

prop，因为它不是真正的选择。事实上，我已经在使用

selection

prop进行实际选择。在我的例子中，我只想在用户双击该行时显示该行的相应数据，但这并不意味着用户已经选择了该行。通过单击相应的复选框，可以在我的应用程序中进行选择。

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));
};