问ReactJS: onClick处理程序在放置在子组件上时不触发

EN

我最近开始使用ReactJS。具体地说，我利用了react-rails ruby gem和react-bootstrap组件。

我有一个关于在子组件中放置onClick事件侦听器的问题。

正如您从下面的代码示例中看到的，我有一个父组件，它在其render函数中“调用”一个子组件。在render函数中，我让React onClick侦听器在单击时调用handleToggle。

###* @jsx React.DOM ###

ToggleIconButton = React.createClass
  getInitialState: ->
    toggleOn: false
  handleToggle: (evt) ->
    this.setState(toggleOn: !this.state.toggleOn)
  render: ->
    `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>`

IconButton = React.createClass
  render: ->
    # BsButton and BsGlyphicon are React-Bootstrap components
    `<BsButton>
      <BsGlyphicon glyph={this.props.glyph} />
      {" " + this.props.text}
     </BsButton>`

不幸的是，这并不像我想象的那样工作。ToggleIconButton::handleToggle永远不会被调用。相反，onClick侦听器放在IconButton上并引用ToggleIconButton::handleToggle。

​

​

我不想给IconButton添加任何额外的行为。在我看来，任何条件逻辑都不应该放在IconButton中。它所要做的就是表示一个图标和按钮，而不必担心任何浏览器事件。这就是ToggleIconButton的作用。

虽然我知道我可以在IconButton周围包装一个React Div并在那里编写一个onClick侦听器(我已经尝试过了，它很有效)，但这看起来有点不太靠谱。

有谁知道做这件事的好方法吗？谢谢你们！