Реагировать на элементы JS Dom

Question

Я новичок в реакции JS и у меня есть один вопрос об элементах DOM. У меня есть таблица в моем компоненте. При наведении курсора мыши я хочу выделить соответствующую ячейку и строку. Я хочу иметь координаты этого элемента. Например, при наведении 3-й ячейки 4-го ряда я хочу получить результат как { r-4, c-3 }. Я не хочу использовать jquery для поиска положения строк. Как мне достичь этого результата?

Answer 1

Этого можно добиться с помощью комбинации onMouseOver, setState и динамического стиля:

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 2

Вы можете добавить собственный код js в componentDidMount и использовать e.target.cellIndex для td и e.target.rowIndex для 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}`);
  })
}

живое демо в реакции на codepen: https://codepen.io/anon/pen/oJdjJW?editors=1010

надеюсь, что смогу помочь вам

Answer 3

Вы не должны касаться DOM самостоятельно, это убило бы цель реакции

Вместо этого ваши слушатели событий должны быть выражены в вашем компоненте, и реакция будет обрабатывать их

внутренне, это означает, что реакция будет вызывать addEventListener и removeEventListener при необходимости среди других полезных опций

сначала ваши данные должны быть структурированы как вложенный массив а затем отобразить ваши строки и ячейки

благодаря мощности Array.prototype.map у вас будет доступ к индексам строк и ячеек

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

вот рабочий пример в codeandbox https://codesandbox.io/s/6zw42m4pxw

Answer 4

На самом деле, ответ не работает с DOM, он отображает сам DOM, поэтому jquery не может помочь вам, если вы хотите делать такие вещи, я предлагаю вам поискать больше о реакции Ссылки , вы может справиться с этим с помощью ref и onclicks, надеюсь, это поможет вам.