ReactJS: Der onClick-Handler wird beim Platzieren auf einer untergeordneten Komponente nicht ausgelöst

Ich habe kürzlich angefangen mit zu arbeitenReactJS. Konkret nutze ich diereact-rails Rubinstein undreact-bootstrap Komponenten.

Ich habe eine Frage zur PlatzierungonClick Ereignis-Listener in untergeordneten Komponenten.

Wie Sie dem folgenden Codebeispiel entnehmen können, habe ich eine übergeordnete Komponente, die eine untergeordnete Komponente in ihrer "aufruft"render Funktion. Innerhalb dessenrender Funktion habe ich ReagiertonClick Hörer, der anrufthandleToggle wenn es angeklickt wird.

###* @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>`

Leider funktioniert das nicht so, wie ich es mir vorgestellt habe.ToggleIconButton::handleToggle wird nie angerufen. Stattdessen dieonClick Hörer wird auf gestelltIconButton und ReferenzenToggleIconButton::handleToggle.

Ich möchte kein zusätzliches Verhalten hinzufügenIconButton. So wie ich es sehe, sollte keine bedingte Logik eingesetzt werdenIconButton. Es muss lediglich ein Symbol und eine Schaltfläche darstellen und sich nicht um Browserereignisse kümmern. Das ist, wasToggleIconButton ist für.

Während ich weiß, dass ich einwickeln könnteReact Div umIconButton und schreibe eineonClick Hörer da (ich habe es ausprobiert und es funktioniert), es scheint, dass das ein bisschen nervös ist.

Kennt jemand einen guten Weg, dies zu tun? Danke Leute!