ReactJS: el controlador onClick no dispara cuando se coloca en un componente secundario

Hace poco comencé a trabajar conReactJS. Específicamente, estoy utilizando elreact-rails gema de rubí yreact-bootstrap componentes.

Tengo una pregunta sobre la colocaciónonClick oyentes de eventos en componentes secundarios.

Como puede ver en el ejemplo de código a continuación, tengo un componente padre que 'llama' a un componente hijo en surender función. Dentro de esorender función, tengo reaccionaronClick oyente que llamahandleToggle cuando se hace clic.

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

Desafortunadamente, esto no funciona como pensé que lo haría.ToggleIconButton::handleToggle nunca se llama. En cambio, elonClick el oyente se coloca enIconButton y referenciasToggleIconButton::handleToggle.

No quiero agregar ningún comportamiento adicional aIconButton. A mi modo de ver, no se debe colocar lógica condicionalIconButton. Todo lo que debe hacer es representar un icono y un botón y no tener que preocuparse por ningún evento del navegador. Eso es lo queToggleIconButton es para.

Si bien sé que podría envolver unReact Div alrededorIconButton y escribe unonClick oyente allí (he intentado esto y funciona), parece que es un poco extraño.

¿Alguien sabe una buena manera de hacer esto? ¡Gracias chicos!