Question

Container组件是主要组件，它反过来调用User Component的呈现。在用户呈现方法中，<li>项具有onClick事件。

onClick事件在页面加载时被调用，然后永远不会被调用click事件。

Container = React.createClass（{

mixins: [ReactMeteorData],

getMeteorData(){
    return{
        currentActiveUsers:ActiveUsers.find({}).fetch()
    };
},

getCurrentActiveUsers(){
    return this.data.currentActiveUsers.map((user) => {
        return <User key={user._id} user={user} />
    }); 
},

render(){
    return(
        <div className="container">
            <div className="container-fluid">
              <div className="row">
                <div className="col-xs-1 col-md-2 col-lg-3 columnBorder">
                    <ul>
                        {this.getCurrentActiveUsers()}
                    </ul> 
                </div>
              </div>
            </div>
        </div>
        );
}

}）; User = React.createClass（{

propTypes:{
    user:React.PropTypes.object.isRequired
},

initiate(){
    console.log("initiated");
},

render(){
    return(
        <li onClick={this.initiate()}>
            {this.props.user.username}
        </li>
    );
}

}）;

Answer 1

您在定义onClick时调用该事件。相反，您需要将onClick绑定到函数：

initiate(){
    console.log("initiated");
},

render(){
    return(
        <li onClick={this.initiate}>
            {this.props.user.username}
        </li>
    );
}

因此，只需从()删除函数调用this.initiate()。

否则，您尝试将console.log的结果绑定到onClick。

不会调用react-js子组件onclick事件

1 个答案: