Come rendere onMouseLeave in React include il contesto figlio?

Question

Attualmente sto costruendo un pulsante a discesa per imparare Reagire. Ho fatto due eventi onMouseEnter e onMouseLeave nel genitore div per renderlo visibile quando si passa sopra con il mouse quando non lo fa. Il problema è che quegli eventi si limitano al genitore.

Come rendere onMouseLeave in React include il contesto figlio? Oppure, come posso mantenere lo stato di espansione vero quando si posiziona il mouse sui bambini?

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

si hanno due diversi div s nel DOM che non si sovrappongono; Io contempla render quindi è più evidente:

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> 
    ); 
} 

Il div che ha il onMouseLeave collegato ad esso non contiene i figli; così, quando il mouse si muove per passare il mouse su un bambino, lascia il div e viene chiamato this.handleHoverOff.

Si potrebbe considerare l'utilizzo di CSS per nascondere i bambini se non devono essere visualizzati o condizionatamente rendendoli:

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

Usando il passaggio del mouse, invece di lasciare il mouse fuori e bloccando l'evento sui bambini L'ho fatto funzionare in modo affidabile, non importa quanto velocemente mi muovo tra le mie liste.

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