Éléments React js Dom

En fait, react ne fonctionne pas avec le DOM, il rend le DOM lui-même, donc la jquery ne peut pas vous aider, si vous voulez faire de telles choses, je vous suggère de rechercher plus sur react Refs , vous pouvez le gérer en utilisant ref et onclicks, j'espère que cela vous aidera.

vous pouvez ajouter du code natif js dans componentDidMount et utiliser e.target.cellIndex pour td et e.target.rowIndex pour row

const tds = window.document.getElementsByTagName("td");
for(var i = 0; i<= tds.length -1;i++){
    tds[i].addEventListener("mouseup", e => {
    console.log(`cell ${e.target.cellIndex +1}` , `Row : ${e.target.parentElement.rowIndex + 1}`);
  })
}

démo en direct en réaction à codepen: https://codepen.io/anon/pen/oJdjJW?editors=1010

j'espère pouvoir vous aider

vous ne devriez pas toucher le DOM vous-même, cela tuerait le but de react

à la place, vos écouteurs d'événements devraient être exprimés dans votre composant et réagir les gérerait

en interne, cela signifie que réagir appellera addEventListener et removeEventListener si nécessaire parmi d'autres optmisations utiles

d'abord, vos données doivent être structurées comme un tableau imbriqué puis mappez sur vos lignes et cellules

grâce à la puissance de Array.prototype.map, vous aurez accès aux index des lignes et des cellules

rows.map((row, rowIndex) => (
    <div>
      {row.map((cell, cellIndex) => (
        <div
          onClick={() => {
            console.log(`you clicked on ${rowIndex}, ${cellIndex}`)
          }}
        >
          {cell}
        </div>
      ))}
    </div>
  ))

voici un exemple de travail dans codesandbox https://codesandbox.io/s/6zw42m4pxw

Vous pouvez y parvenir en combinant onMouseOver , setState et un style dynamique:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

table {
  border-collapse: 'collapse'
}

td {
  padding: 1em
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            x: null,
            y: null
        }
    }
    render() {
        return (
            <div>
                <p>User is hovering over ({this.state.x}, {this.state.y})</p>
                <table>
                    {(new Array(10)).fill().map((_, y) => (
                        <tr>
                            {(new Array(10).fill().map((_, x) => (
                                <td
                                onMouseEnter={() => this.setState({x,y})}
                                style={{backgroundColor: (this.state.x==x || this.state.y==y) ? 'red' : 'grey'}}
                                ></td>
                            )))}
                        </tr>
                    ))}
                </table>
            </div>
        )
    }
}

ReactDOM.render((<App/>), document.querySelector('#root'));