React js Dom元素

Question

I am new in react js and have a one question about DOM elements. I have a table in my component. On mouse over I want to highlight corresponding cell and row . I want to have an coordinates of that element. For example on hovering 3-th cell of 4-th row I want to have result as { r-4, c-3 } . I do not want use jquery for finding position of rows. How can I reach to that result?

Answer 1

you can add js native code in componentDidMount and use e.target.cellIndex for td and e.target.rowIndex for 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}`);
  })
}

live demo in react at codepen: https://codepen.io/anon/pen/oJdjJW?editors=1010

hope i can help you

Answer 2

you should not touch the DOM yourself, that would kill the purpose of react

instead, your event listeners should be expressed in your component and react would handle them

internally, this means that react will call addEventListener and removeEventListener when necessary among other useful optmizations

first your data should be structured as a nested array and then map over your rows and cells

thanks to the power of Array.prototype.map, you will have access to the indexes of the rows and cells

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

here is working example in codesandbox https://codesandbox.io/s/6zw42m4pxw

Answer 3

You can achieve this with a combination of onMouseOver , setState , and dynamic styling:

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

 table { border-collapse: 'collapse' } td { padding: 1em } 

 <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> 

Answer 4

实际上，react无法与DOM一起使用，而是呈现DOM本身，因此jquery不能为您提供帮助，如果您想这样做，我建议您搜索有关react Refs的更多信息，可以使用ref和onclicks进行处理，希望对您有帮助。