Question

我遇到了使用Mixin的ReactJS组件以及触发onClick事件的动态子级的问题。我有一个react组件，基于传递给它的一些道具，会将其他反应组件推送到一个数组中。然后在render方法的最终return语句中，将这些组件添加到内容中。这些动态子级在其render方法中定义onClick事件，并使用mixin中的处理程序。但是，只有父级的处理程序触发。我从未在孩子们身上发过点击事件。但是，如果这些子代码是硬编码的，那么onClick处理程序确实会触发。知道我做错了什么吗？粗略的例子：

密新：

var eventhandler = {
    handleClick: function(e) { console.log('click', this.name); }
};

组件及其子组件：

 var foo = React.createClass({
    mixins: [eventhandler],
    name: '',
    ...
    render: function() {
        children_comps = [];
        if(somecondition) {
            children_comps.push(<ChildComponent id={this.props.id} />);
        }

        return (<div onClick={this.handleClick}><p>asdf</p>{children_comps}</div>);
    }
};

ChildComponent：

var ChildComponent = React.createClass({
    mixins: [eventhandler],
    name: '',
    ...
    render: function() {
        return(<div onClick={this.handleClick}>CHILD {this.props.id} OF THE WILD</div>);
    }
};

ReactJS Dynamic Children和onClick事件

0 个答案: