How to make onMouseLeave in React include a child context?

Question

I am currently creating a dropdown button to learn React. I made two events onMouseEnter and onMouseLeave in the parent div to make it visible when the hang disappears, when not. The problem is that these events apply only to parents.

How to make onMouseLeave in React enable child context? Or, how can I keep expanding if it falls on children?

class DropDownButton extends React.Component { constructor(){ super(); this.handleHoverOn = this.handleHoverOn.bind(this); this.handleHoverOff = this.handleHoverOff.bind(this); this.state = {expand: false}; } handleHoverOn(){ if(this.props.hover){ this.setState({expand: true}); } } handleHoverOff(){ if(this.props.hover){ this.setState({expand: false}); } } render() { return ( <div> <div className={styles.listTitle} onMouseEnter={this.handleHoverOn} onMouseLeave={this.handleHoverOff}> {this.props.name} </div> <div> {React.Children.map(this.props.children, function(child){ return React.cloneElement(child, {className: 'child'}); })} </div> </div> ); } } 

Answer 1

You have two different div in the DOM that do not overlap; I split render to make it more obvious:

 render() { return ( <div> <div className={styles.listTitle} onMouseEnter={this.handleHoverOn} onMouseLeave={this.handleHoverOff}> {this.props.name} </div> <div> {React.Children.map(this.props.children, function(child){ return React.cloneElement(child, {className: 'child'}); })} </div> </div> ); } 

div to which onMouseLeave attached onMouseLeave not contain children; therefore, when the mouse moves to hover over a child, it leaves a call to div and this.handleHoverOff .

You can use CSS to hide children if they should not be displayed or conditionally execute them:

 render() { return ( <div className={styles.listTitle} onMouseEnter={this.handleHoverOn} onMouseLeave={this.handleHoverOff}> {this.props.name} {this.state.expanded && this.renderChildren()} </div> ); }, renderChildren() { return ( <div> {React.Children.map(this.props.children, function(child){ return React.cloneElement(child, {className: 'child'}); })} </div> ); } 

Answer 2

Using the mouse, leaving instead of the mouse and blocking the event for children, I got reliable work no matter how fast I navigate through my list items.

fooobar.com/questions/53596 / ...