ReactJS：放置在子组件上时，onClick处理程序不会触发

我最近开始与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放置条件逻辑。 所有它应该做的是代表一个图标和button，而不必担心任何浏览器事件。 这就是ToggleIconButton的用途。

虽然我知道我可以在IconButton周围包装一个React Div ，并在IconButton写一个onClick监听器（我已经尝试了这个，它工作），似乎有点janky。

有没有人知道这样做的好方法？ 多谢你们！

Answer 1

所以，在这种情况下处理事件的正确方法是将事件处理程序传递给子组件。 有几种方法可以实现你想要的function，而且我可能以不同的方式实现这种行为（不知道用例是什么），但是我在JSX中为你演示了父和子组件之间的典型事件处理。 你可以在这里find它…

JS小提琴

试想一下这样的：

 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!" /> ) } }); 

Answer 2

你不需要做一个子组件，如果在你调用节点之前创build一个var来引用渲染的这个即

 var self = this; 

所以例如（这是人为的，var self在这种情况下是不需要的，但是在嵌套返回语句的情况下，它将是必需的）。

 var ParentComponent = React.createClass({ render: function(){ var self = this; return ( <input type="button" onClick={self.handleThatEvent} value="Click Me!" />; ) }, handleThatEvent: function(e){ //update state, etc. } }); 

更好的是，你可以将它绑定到函数。

 var ParentComponent = React.createClass({ render: function(){ return ( this.state.array.map(function(){ return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />); }.bind(this)); ) }, handleThatEvent: function(e){ //update state, etc. } }); 

或者在评论中按照captray的build议

 var ParentComponent = React.createClass({ render: function(){ return ( this.state.array.map(function(){ return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />); }, this); ) }, handleThatEvent: function(e){ //update state, etc. } });