在 reactjs 中，在 hover 上，表格的一行应该更改具有相同行索引值的其他表格的行的背景

Question

I have two different tables, I need to highlight a row of the second table if the user hovers a row of the first table. The highlight must be done based on the hovered row index.

For example:

<div>
    <table>
        <tr><td>table 1 row 1</td></tr> // => hovered
        <tr><td>table 1 row 2</td></tr>
        <tr><td>table 1 row 3</td></tr>
    </table>
</div>
<div>
    <table>
        <tr><td>table 2 row 1</td></tr> // => highlighted
        <tr><td>table 2 row 2</td></tr>
        <tr><td>table 2 row 3</td></tr>
    </table>
</div>

Answer 1

In the first table add an onMouseEnter/onMouseLeave event allowing you to set a state with the indice for the row over

<tr onMouseEnter={() => setRowToHover(1)}><td>table 1 row 1</td></tr>
<tr><td>table 2 row 2</td></tr>

In the second table dynamic add a className to the tr to hightlight if you are using a simple tr or add a hightlight props if you have a custom component

<tr className={rowToHover === 1 ? 'hover-class' : ''} ><td>table 2 row 1</td></tr>

I assume you're gonna render your array in a dynamic way

Answer 2

add class name for each row

<table>
  <tr class="table-row"><td>table 2 row 1</td></tr> // => highlighted
  <tr class="table-row"><td>table 2 row 2</td></tr>
  <tr class="table-row"><td>table 2 row 3</td></tr>
</table>

in scss file, (pseudo selector)

.table-row:hover {
  background-color: 'lightblue',
}