我最近开始使用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的用途。
虽然我知道我可以包装一个React Div围绕IconButton和写一个onClick监听器(我试过这个和它的工作原理)，它似乎是一个有点janky。
有人知道这样做的好方法吗？多谢你们！
因此，在这种情况下处理事件的正确方法是将事件处理程序传递给子组件。有几种方法来完成你想要的，我可能实现这种行为不同(不确定用例是什么)，但我在JSX中为你演示了父和子组件之间典型的事件处理的示例。你可以在这里找到它…
只是想想它这样：
var ParentComponent = React.createClass({
render: function(){
return (
<ChildComponent onSomeEvent={this.handleThatEvent} />;
)
},handleThatEvent: function(e){
//update state,etc.
}
});
var ChildComponent = React.createClass({
render: function(){
return (
<input type="button" onClick={this.props.onSomeEvent} value="Click Me!" />
)
}
});
