动态组件 onClick 不起作用答案

【问题标题】：Dynamic Component onClick not working动态组件 onClick 不起作用
【发布时间】：2023-04-02 15:32:01
【问题描述】：

我有一个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')
);

【问题讨论】：

标签： javascript dynamic reactjs onclick state

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

简单！当onClick 像您所做的那样直接放在组件上时，它NOT 设置为onClick 函数。它被放置在this.props.onClick。您仍然需要将 onClick 添加到您的实际 DOM 元素中。见附件JSFiddle！

【讨论】：

谢谢。这就说得通了。因此，另一种选择是将其包装在 div 中并将其附加到那里。