Wie kann onMouseLeave in React den untergeordneten Kontext enthalten?

Question

Ich baue gerade einen Dropdown-Button, um React zu lernen. Ich habe zwei onMouseEnter- und onMouseLeave-Ereignisse im übergeordneten div gemacht, um es sichtbar zu machen, wenn es nicht angezeigt wird. Das Problem ist, dass diese Ereignisse nur bei den Eltern bleiben.

Wie onMouseLeave in React den untergeordneten Kontext enthalten? Oder, wie kann ich den Zustand beibehalten, um wahr zu sein, wenn ich auf Kinder schwebe?

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

Sie haben zwei verschiedene div s in Ihrem DOM, die sich nicht überlappen; Ich werde aufgespalten render so ist es offensichtlich:

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

Die div, die die onMouseLeave daran befestigt hat die Kinder nicht enthalten; Wenn also die Maus bewegt, um auf ein Kind zu schweben, verlässt es die div und this.handleHoverOff wird aufgerufen.

Sie sollten erwägen CSS mit den Kindern zu verstecken, wenn sie nicht angezeigt werden soll, oder wodurch sie bedingt:

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

Durch die auf Maus aus statt Maus verlassen und auf die Kinder das Ereignis blockiert Ich habe es zuverlässig funktioniert, egal wie schnell ich meine Listenelemente durchblättere.

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