Я недавно начал работать сReactJS, В частности, я используюreact-rails рубиновый камень иreact-bootstrap компоненты.

У меня есть вопрос относительно размещенияonClick слушатели событий в дочерних компонентах.

Как вы можете видеть из примера кода ниже, у меня есть родительский компонент, который «вызывает» дочерний компонент в своемrender функция. В этомrender функция, у меня есть ReactonClick слушатель, который звонит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 для.

Хотя я знаю, что могу обернутьReact Div вокругIconButton и написатьonClick слушатель там (я пробовал это, и это работает), кажется, что это немного отвратительно.

Кто-нибудь знает хороший способ сделать это? Спасибо, парни!