代码之家 › 专栏 › 技术社区 › Alexei Reznik

反应js,处理onMouseOver事件

react-rails onmouseover reactjs

Alexei Reznik · 技术社区 · 8 年前

作为React中的noob,我面临一个问题:组件返回一个简单的嵌套表,因此“大表id”的每个单元格都包含另一个小表“小表id”。

问题是,每次mouseover事件发生时,我总是将“small-cell-*”作为目标。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>
  )
 }
});