Недавно я начал работать с ReactJS
. В частности, я использую компоненты react-rails
ruby gem и react-bootstrap
.
У меня вопрос о размещении onClick
прослушивателей событий в дочерних компонентах.
Как видно из примера кода ниже, у меня есть родительский компонент, который "вызывает" дочерний компонент в своей функции render
. Внутри этой функции render
у меня есть React onClick
listener, который вызывает 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
(я пробовал это, и он работает), похоже, что это немного болтливо.
Кто-нибудь знает хороший способ сделать это? Спасибо, ребята!