动态组件onClick不起作用

我有一个动态的组件设置，它的工作。如果我执行var Component = Switch或将Component设置为某个其他React组件，它就会起作用。但我希望能够在点击它时切换。

因此，我设置了onClick事件。然而它并没有开火。我没有得到任何日志或任何更改。任何想法为什么？

var Other = React.createClass({ 
    render: function() { 
    return <h2>Test this craziness</h2>; 
    } 
}); 

var Switch = React.createClass({ 
    render: function() { 
    return <h2>A different one to switch with</h2>; 
    } 
}); 

var Hello = React.createClass({ 
    getInitialState: function() { 
    return {on: true}; 
    }, 
    handleClick: function() { 
    console.log('handleclick'); 
    this.setState({on: ! this.state.on}); 
    }, 
    render: function() { 
    console.log(this.state); 
    var Component = this.state.on ? this.props.component.name : Switch; 
    return <Component onClick={this.handleClick} />; 
    } 
}); 

ReactDOM.render(
    <Hello component={{name: Other}} />, 
    document.getElementById('container') 
);

来源

2016-04-15 merlinpatt

轻松！当onClick直接放置在组件上时，就像您已经完成的那样，将设置为设置为onClick函数。它被放置在this.props.onClick。您仍然需要将onClick添加到您的实际DOM元素。见附件JSFiddle！

来源

2016-04-15 03:16:17 danmakenoise

谢谢。这就说得通了。那么另一种选择是将它包装在一个'div'中，并将其附加在那里。 – merlinpatt

您需要的onClick属性添加到一个实际的HTML元素，即

var Other = React.createClass({ 
    render: function() { 
    return <h2 onClick={this.props.onClick}>Test this craziness</h2>; 
    } 
});

来源

2016-04-15 03:11:54 FuriousD

动态组件onClick不起作用

回答

相关问题