我最近开始使用ReactJS
。具体地说,我利用了react-rails
ruby gem和react-bootstrap
组件。
我有一个关于在子组件中放置onClick
事件侦听器的问题。
正如您从下面的代码示例中看到的,我有一个父组件,它在其render
函数中“调用”一个子组件。在render
函数中,我让React onClick
侦听器在单击时调用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
的作用。
虽然我知道我可以在IconButton
周围包装一个React Div
并在那里编写一个onClick
侦听器(我已经尝试过了,它很有效),但这看起来有点不太靠谱。
有谁知道做这件事的好方法吗?谢谢你们!
https://stackoverflow.com/questions/24103072
复制相似问题