Comecei recentemente a trabalhar comReactJS. Especificamente, estou utilizando oreact-rails gema de rubi ereact-bootstrap componentes.

Eu tenho uma pergunta sobre a colocaçãoonClick ouvintes de eventos em componentes filhos.

Como você pode ver no exemplo de código abaixo, eu tenho um componente pai que 'chama' um componente filho em seurender função. Dentro desserender função, eu tenho reagironClick ouvinte que chamahandleToggle quando é clicado.

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

Infelizmente, isso não funciona da maneira que eu pensava.ToggleIconButton::handleToggle nunca é chamado. Em vez disso, oonClick ouvinte é colocado emIconButton e referênciasToggleIconButton::handleToggle.

Não quero adicionar nenhum comportamento adicional aoIconButton. Do meu ponto de vista, nenhuma lógica condicional deve ser colocada emIconButton. Tudo o que deve fazer é representar um ícone e botão e não precisa se preocupar com nenhum evento do navegador. Isso é o queToggleIconButton é para.

Embora eu saiba que poderia envolver umReact Div por aíIconButton e escreva umonClick ouvinte lá (eu tentei isso e funciona), parece que isso é um pouco irregular.

Alguém sabe uma boa maneira de fazer isso? Obrigado rapazes!