鉴于以下内容:
render() {
const onMouseOver = (event) => {
this.setState({ isHovering: true });
};
const onMouseOut = (event) => {
this.setState({ isHovering: false });
};
const open = this.state.isHovering ? true : false;
return (
<Nav className={styles.TopNav} bsStyle="pills" activeKey={1}>
<NavDropdown
className={dropDownClasses}
eventKey={1}
open={open}
title="Cards"
id="nav-dropdown"
onMouseEnter={onMouseOver}
onMouseOut={onMouseOut}>
<MenuItem eventKey="1.1">Action</MenuItem>
<MenuItem eventKey="1.2">Another action</MenuItem>
</NavDropdown>
<NavItem className={styles.navLink} eventKey={2}>Blog</NavItem>
</Nav>
);
当鼠标悬停在NavDropdown的子节点上时,如何阻止onMouseOut触发。
我可以在onMouseOut中检测到我是否超过了孩子吗?
答案 0 :(得分:22)
这不是React特有的。 mouseover
和mouseout
事件会冒泡,因此处理程序也会触发元素的子元素。 mouseenter
和mouseleave
不要冒泡。
所以你应该倾听mouseleave
。