我最近开始使用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
侦听器(我已经尝试过了,它很有效),但这看起来有点不太靠谱。
有谁知道做这件事的好方法吗?谢谢你们!
发布于 2014-06-10 07:21:00
因此,在这种情况下处理事件的正确方法是将事件处理程序向下传递给子组件。有几种方法可以实现您想要的功能,我可能会以不同的方式实现此行为(不确定用例是什么),但我用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!" />
)
}
});
发布于 2014-11-14 14:20:34
如果在调用节点之前创建了一个var来引用渲染器的this,那么就不需要生成子组件。
var self = this;
例如(这是人为的,在这种情况下不需要var self,但在嵌套return语句的情况下需要它)。
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.
}
});
或者听从卡普雷在评论中的建议
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.
}
});
https://stackoverflow.com/questions/24103072
复制相似问题