Cách tạo onMouseLeave trong React bao gồm bối cảnh con?

Question

Tôi hiện đang xây dựng một nút thả xuống để tìm hiểu React. Tôi đã thực hiện hai sự kiện onMouseEnter và onMouseLeave trong div cha để hiển thị khi di chuột biến mất khi không. Vấn đề là những sự kiện đó chỉ dính vào cha mẹ.

Cách tạo onMouseLeave trong React bao gồm ngữ cảnh con? Hoặc, làm thế nào tôi có thể giữ cho trạng thái mở rộng là đúng khi lơ lửng trên trẻ em?

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

Bạn có hai div s khác nhau trong DOM của bạn mà không chồng chéo; Tôi sẽ chia tay render do đó, nó rõ ràng hơn:

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

Các div rằng có onMouseLeave gắn liền với nó không chứa các trẻ em; vì vậy, khi con chuột di chuyển để di chuột lên một đứa trẻ, nó rời khỏi div và this.handleHoverOff được gọi.

Bạn có thể xem xét sử dụng CSS để ẩn những đứa trẻ nếu họ không nên được hiển thị, hoặc có điều kiện khiến chúng:

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

Bằng việc sử dụng chuột rời thay vì chuột ra ngoài và ngăn chặn sự kiện này trên trẻ em Tôi đã làm cho nó hoạt động đáng tin cậy bất kể tôi di chuyển nhanh đến đâu trong danh sách của mình.

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