Question

我有一个JS Fiddle，代码如下。

我有一个动态组件设置，它确实有效。如果我执行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')
);

Answer 1

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

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

Answer 2

轻松！当onClick直接放在Component上时，就像你已经完成的那样， NOT 设置为onClick函数。而是放在this.props.onClick中。您仍然需要将onClick添加到实际的DOM元素中。请参阅附件JSFiddle！

动态组件onClick无法正常工作

2 个答案: