पर हमला करने के लिए कैसे रहें बच्चे के संदर्भ में शामिल हैं?

Question

मैं वर्तमान में प्रतिक्रिया सीखने के लिए एक ड्रॉपडाउन बटन बना रहा हूं। मैंने माता-पिता div में दो mouseEnter और onMouseLeave ईवेंट बनाये हैं, जब यह होवर हो रहा है तो इसे गायब होने पर दिखाई नहीं दे रहा है। समस्या यह है कि वे घटनाएं केवल माता-पिता के साथ रहती हैं।

रिमोट पर मॉउसलिव को कैसे बनाया जाए बच्चे के संदर्भ में शामिल हैं? या, बच्चों पर होवर करते समय मैं राज्य का विस्तार कैसे सच रख सकता हूं?

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

आप अपने डोम में दो अलग अलग div कि ओवरलैप नहीं है; मैं अलग हो जाएगा render तो यह और अधिक स्पष्ट है:

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

divonMouseLeave इसे से जुड़े बच्चों शामिल नहीं करता है; इसलिए, जब माउस किसी बच्चे पर होवर करने के लिए चलता है, तो यह div और this.handleHoverOff कहलाता है।

आप अगर वे प्रदर्शित नहीं किया जाना चाहिए या सशर्त उन्हें प्रतिपादन बच्चों को छिपाने के लिए सीएसएस विचार कर सकते हैं:

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

बच्चों पर माउस पर माउस के बजाय बाहर छोड़ उपयोग करते हुए और घटना को अवरुद्ध करके मुझे यह भरोसेमंद काम मिल गया कि इससे कोई फर्क नहीं पड़ता कि मैं अपनी सूची वस्तुओं के माध्यम से कितनी तेज़ी से आगे बढ़ता हूं।

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