React.js, обработка onMouseOver event

Question

Будучи noob in React Я столкнулся с проблемой: компонент возвращает простую вложенную таблицу, поэтому каждая ячейка «big-table-id» содержит таблицу небольших таблиц маленькой таблицы -Я бы'.

Вещь в том, что каждый раз, когда происходит событие mouseover, я всегда получаю «small-cell- *» как target.id, даже если обработчик события ссылается в родительской (большой) таблице. Есть ли способ получить родительскую таблицу как «непрозрачную», чтобы я мог получить «big-table-cell-1» или «small-table-id»?

(using Rails with 'react-rails' gem) 

var Tables = React.createClass({ 

handleMouseOver: function(e){ 
    console.log(e.target.id) 
}, 

render: function(){ 
return (
    <table id='big-table-id' onMouseOver={this.handleMouseOver}> 
    <tr> 
    <td id='big-table-cell-1'> 
     <table id='small-table-id'> 
     <tr> 
      <td id='small-cell-1> 
      text 1 
      </td> 
      <td id='small-cell-2'> 
      text 2 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    </table> 
) 
} 
}); 

Answer 1

DOM-позволяет выбрать элементы ребенка и родительские узлы с методами, как firstChild и parentElement. Вы должны изучить их.

Редактировать: также не уверен, что это сработает, но вы можете попробовать обернуть большую таблицу в div и установить там обратный вызов и посмотреть, что он ссылается.