How to make onMouseLeave in React include the child context?

Question

I am currently building a dropdown button to learn React. I have made two onMouseEnter and onMouseLeave events in the parent div to make it visible when hovering it disappear when not. The problem is that those events only stick to parent.

How to make onMouseLeave in React include the child context? Or, how can I keep the state expand be true when hovering 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>
     );
}
}

score 10 · Accepted Answer · answered Aug 16 '15 at 16:06

You have two different divs in your DOM that don't overlap; I'll split up render so it's 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>
     );
}

The div that has the onMouseLeave attached to it does not contain the children; so, when the mouse moves to hover on a child, it leaves the div and this.handleHoverOff is called.

You might consider using CSS to hide the children if they shouldn't be displayed, or conditionally rendering 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>
    );
}

It works. I did a stupid mistake, and the conditional rendering is useful for me too. Thanks! — Karl Karl, Aug 17 '15 at 12:33

score 5 · Answer 2 · answered Sep 19 '17 at 06:48

5

By using the on mouse leave instead of mouse out and blocking the event on the children I got it reliably working no matter how fast I move through my list items.

https://stackoverflow.com/a/18837002/3302764

answered Sep 19 '17 at 06:48

JoshuaTree

1,211
14
19

How to make onMouseLeave in React include the child context?

2 Answers2

Linked