React.js, 处理 onMouseOver 事件

Question

作为 React 的菜鸟，我遇到了一个问题：组件 returns 是一个简单的嵌套 table，因此 'big-table-id' 的每个单元格都包含另一个小的 table 'small-table-id'。

问题是，每次发生鼠标悬停事件时，我总是将 'small-cell-*' 作为 target.id，即使在父级（大）table 中引用了事件处理程序.有没有办法让父 table 有点 'non-transparent' 这样我就可以收到 '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 等方法 select 元素子节点和父节点。你应该看看那些。

编辑：也不确定这是否可行，但您可以尝试将大 table 包装在 div 中并在那里设置回调并查看它引用的内容。

React.js, 处理 onMouseOver 事件

React.js, handling onMouseOver event

reactjs

onmouseover

react-rails