Question

尝试将事件从Container传递到演示组件。

据我所知，我将事件附加到演示/视图级别组件。但是我将功能从Container组件传递给Presentational组件作为prop。我确保将我的功能绑定到此，但我得到了一个＆＃34;无法读取属性＆＃39; onMouseEnterHandler＆＃39;未定义＆＃34;错误。

我如何正确传递或绑定此功能？

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)

ReactJs事件从Container传递到演示组件

1 个答案: