从容器传递给演示组件的ReactJs事件

Question

试图围绕将事件从容器传递给演示组件来包装头部。

据我所知我的情况下附连到表象/视图级别组件。但是我将功能从Container组件传递到了Presentational组件作为道具。我确保将我的函数绑定到这个，但是我得到了一个“无法读取属性”的未定义的“错误的鼠标输入处理程序”。

我怎么不能正常传递或结合这个功能呢？

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的.map回调里面undefined。这就是为什么当您尝试访问this.onMouseEnterHandler时出现错误。

要么使用箭头功能：

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

或通过this作为第二个参数.map：

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