Question

在React中成为一个菜鸟我遇到了一个问题：组件返回一个简单的嵌套表，因此'big-table-id'的每个单元格都包含另一个小表'small-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中并在那里设置回调并查看它所引用的内容。

React.js，处理onMouseOver事件

1 个答案: