[英]React.js, handling onMouseOver event
being a noob in React I'm facing a problem: the component returns a simple nested table, so each cell of the 'big-table-id' contains another small table 'small-table-id'. 作为React的菜鸟,我遇到了一个问题:该组件返回一个简单的嵌套表,因此“ big-table-id”的每个单元格都包含另一个小表“ small-table-id”。
Thing is that every time the mouseover event occurs I'm always getting the 'small-cell-*' as target.id, even if the event handler is referenced in the parent (big) table. 问题是,每次发生mouseover事件时,即使在父(大)表中引用了事件处理程序,我也总是将'small-cell- *'作为target.id。 Is there any way to get the parent table kinda 'non-transparent' so that I could receive 'big-table-cell-1' or 'small-table-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>
)
}
});
The DOM lets you select an elements child and parent nodes with methods like firstChild
and parentElement
. DOM使您可以使用
firstChild
和parentElement
类的方法选择元素的子节点和父节点。 You should look into those. 您应该调查那些。
Edit: also not sure if this would work but you could try wrapping the big table in a div and setting the callback there and seeing what it references. 编辑:还不确定这是否可行,但是您可以尝试将大表包装在div中,然后在其中设置回调并查看其引用的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.