首先我知道这个帖子:React onClick event on component
有没有办法直接对React组件这样做?这似乎没有在线程中得到回答 . 我知道如何将攻击的功能添加到更深层,但这只是额外的连接代码,使IMO更加脆弱 . 它对ListItem级别所做的任何更改都必须对互连进行 . 我想这会变得更糟,如果是一个nTh级别的子组件试图回到主状态 .
My Case
父 - >列表 - >列表项
我需要在list元素上有一个click事件才能在父元素上触发一个函数 . 我希望能够单击一个ListItem组件并让onClick事件返回到Parent并更新状态以触发将一个兄弟组件重新呈现给List我已经删除了很多样板 .
父组件包装它 . 这是我使用state更新渲染视图的地方 .
var Parent = React.createClass({
updateState:function(newCurrent){
this.setState({current: newCurrent});
},
render: function() {
return (
<div className="Parent" >
<Current this.state.current />
<List
list={this.state.list}
updateCurrentVideo={this.updateCurrentVideo} />
</div>
);
}
});
这里列出的列表元素在开始时描述,我想在每个ListItem上附加一个onClick事件,将其数据传递回父级更新状态 .
而不是将事件附加到组件内部并且必须像这样传递触发器 . ListItem->列表 - >父() . 在我通过List的子项映射时附加监听器会很好 .
var List = React.createClass({
render: function() {
var list = this.props.list.map(function(item,index){
return (
<ListItem
onClick={ () => this.props.updateState(item) } />
)
}.bind(this));
return (
<div className="List">
{list}
</div>
);
}
});
在组件级别附加的onClick似乎实际上没有做任何事情 . 但是,如果我将它更改为这样并使用回调函数将prop传递给ListItem,那么它就会神奇地起作用 . 所以我想我的更大问题 .
var ListVideos = React.createClass({
handleClick:function(data){
this.props.updateCurrentVideo(data)
},
render: function() {
var list = this.props.list.map(function(item,index){
return (
<ListItem
handleClick={this.handleClick(item) } />
)
}.bind(this));
return (
<div className="List">
{list}
</div>
);
}
});
然后将onClick附加到ListItem中的Component包装器
var ListItem = React.createClass({
render: function() {
return (
<div className="ListItem" onClick={this.props.handleClick}>
// STUFF
</div>
);
}
});
2 回答
您可以让ListItem传递其所有道具,允许事件侦听器自动进入 .
或者使用es6,您只能传递您不使用的那些,这是首选 .
如果我明白你在问什么 - 你可以从没有菊花链接通过父母的孙子中调用祖父母的方法吗? - 那么是的,你可以做到 .
你的问题可能是因为在第一个例子中,当你创建
List
时,你给它一个指向updateCurrentVideo
的属性,它不存在,然后当你创建ListItem
时,你给它一个指向this.props.UpdateState
的属性,它也没有不存在 .它不是
List
和ListVideos
之间的区别?)或者你没有给我们确切的名字 . 错误命名的处理程序可能是React的静默失败源 .无论如何,一般的答案是这样的事情会起作用:
在调用回调之前需要处理Child中的onClick的情况下,您还可以在不使用匿名函数的情况下执行更多的vanilla .