ReactJs-Ereignis, das von Container an Presentational Components übergeben wurde

Question

Versuchen, meinen Kopf um das Übergeben von Ereignissen von Container zu Presentational-Komponenten zu wickeln.

Wie ich es verstehe, füge ich das Ereignis an die Presentational/View-Level-Komponente. Aber ich übergebe die Funktionalität von der Container-Komponente an die Presentational-Komponente als Prop. Ich bin sicher, meine Funktion an diese zu binden, aber bekomme eine "Kann nicht lesen Eigenschaft onMouseEnterHandler" von undefined "Fehler.

Wie kann ich diese Funktion nicht richtig übergeben oder binden?

class FeaturesContainer extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      hovered: false 
     } 
     this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this); 
    } 
    onMouseEnterHandler() { 
     this.setState({ 
      hovered: true 
     }) 
     console.log('mouse enter, ' + this.state.hovered); 
    } 
    render() { 
     return(
      <div className="page features" > 
       <ul className="features-list"> 
        {data.features.map(function(obj, i) { 
         return (
          <li key={i}> 
           <Feature {...obj} onMouseEnterHandler={this.onMouseEnterHandler} /> 
          </li> 
         ) 
        })} 
       </ul> 
      </div> 
     ) 
    } 
} 

class Feature extends React.Component { 
    render() { 
     var bgImg = { 
      backgroundImage: 'url(' + this.props.img + ')' 
     }; 
     return (
      <div className="feature-container" onMouseEnter={this.props.onMouseEnterHandler}> 
       <div style={bgImg} className="feature-img"></div> 
       <div className="feature"> 
        <h4 className="feature-issue">Issue {this.props.issue}</h4> 
        <h1 className="feature-title">{this.props.title}</h1> 
        <h4 className="feature-copy">{this.props.copy}</h4> 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 1

this innerhalb des .map Rückruf ist undefined. Aus diesem Grund erhalten Sie einen Fehler beim Zugriff auf this.onMouseEnterHandler.

Entweder verwenden einen Pfeil Funktion:

data.features.map((obj, i) => { ... }) 

oder this als zweites Argument übergeben zu .map:

data.features.map(function(obj, i) { ... }, this)