如何在ReactJS中获得附加处理程序的元素？
如何在ReactJS中获得附加处理程序的元素？
提问于 2017-09-21 21:50:36
我正在使用ReactJS中的无序列表构建一个菜单。我将单击事件处理程序附加到li上，如下所示：
const menuItems = sidebarItems.mainItems.map((item) => {
if (item.subitems.length > 0) {
return (
<li onClick={this.showSubmenu.bind(this)}>
<span>{item.name}</span>
</li>
)
}
});但是当函数showSubmenu(e)被调用时，当我得到e.target时，我得到的元素是span而不是li。我想我会得到李，因为我把事件处理程序附加到李。
我怎样才能通过这种方法得到李呢？我不想使用jquery将事件处理程序附加到每个li。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-21 21:54:29
只需从事件处理程序中删除bind：
class Menu extends React.Component {
constructor() {
super()
this.state = {
items: [{ name: 'Item 1' }, { name: 'Item 2' }]
}
this.showSubmenu = this.showSubmenu.bind(this)
}
showSubmenu(event) {
alert(event.target.tagName)
}
render() {
const { items } = this.state
return (
<ul>
{items.map((item, index) =>
<li
key={index}
onClick={this.showSubmenu}
>
{item.name}
</li>
)}
</ul>
)
}
}
ReactDOM.render(<Menu />, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46357680
复制
相似问题
使用特权帐户重置AD用户帐户密码
在Meteor帐户中重置密码后禁用登录-密码
用户在更改密码后将被注销。
编辑用户的帐户详细信息
Django:帐户创建后密码重置的无效令牌
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
