Блог

Я пытался раскрасить мои Table when onHover и onClick событие происходят с помощью обоих js и css , но у меня одна и та же проблема с обоими .. если курсор покидает <tbody> активный, он мгновенно возвращается к старому цвету.

Что я хотел бы сделать, так это то, что когда вы нажимаете на a row в таблице, он остается активным до тех пор, пока не будет сделан щелчок по другому row .

Для решения css я использовал это:

 .hoverClass:hover {
  background: red;
}
.hoverClass:active {
  background: yellow;
}
  

И для решения js:

   onTableRowClicked = (e) => {
    this.setState({ currentColoringTarget: e });
    e.currentTarget.style.background = "#EEE55E";
  };

  changeTableRowBackgroundOnMouseOver = (e) => {
    e.currentTarget.style.background = "#EEEEEE";
  };

  changeTableRowBackgroundOnMouseOut = (e) => {
    e.currentTarget.style.background = "transparent";
  };

...
<tbody
  onClick={(e) => this.onTableRowClicked(e)}
  onMouseOver={this.changeTableRowBackgroundOnMouseOver}
  onMouseOut={this.changeTableRowBackgroundOnMouseOut}
>
  <tr>
    <th className="vertically-aligned-th">
      <strong>1)</strong>
    </th>
    <th className="vertically-aligned-th">21314</th>
    <th className="vertically-aligned-th">address2</th>

    <th>
      <Button className="acceptButton">Accept</Button>
    </th>
    <th>
      <Button className="declineButton">Decline</Button>
    </th>
  </tr>
</tbody>
...
  

Вот CodeSandbox с кодом.

Вы двигались в правильном направлении, но вместо того, чтобы напрямую обращаться к DOM style.backgroundColor , вы можете использовать некоторое состояние реакции для отслеживания идентификатора строки, а затем применить выбранный класс, который обрабатывает стиль.

Я обновил изолированную среду, чтобы дать вам представление о том, как это сделать. https://codesandbox.io/s/elegant-lewin-duqt6?file=/src/App.js

ПРИМЕЧАНИЕ: я применил выделение строк только для первых двух строк верхней таблицы. Это решение потребует доработки, но должно дать вам представление о том, как этого добиться.