我喜欢在事件触发时将属性属性/ props/state值从子组件发送到父组件onDrag.我找不到合适的文件.
这是我的代码:
/*** @jsx React.DOM */
var APP=React.createClass({
getInitialState:function()
{
return {url:'http://www.youtube.com/embed/XGSy3_Czz8k'}
},
handleDrag:function(vidurl)
{
alert(vidurl); //i need to get child component url here.
},
render:function(){
return <div>
<VideoFrame src={this.state.url} />
<hr/>
<videos handle={this.handleDrag(vidurl)} />
</div>
}
});
var VideoFrame=React.createClass({
render:function(){
return <div>
<iframe width="420" height="315" src={this.props.src}>
</iframe>
</div>
}
});
var videos=React.createClass({
getInitialState:function()
{
return {vidurl:'http://www.youtube.com/embed/XGSy3_Czz8k'}
},
render:function()
{
return <img src="http://upload.wikimedia.org/wikipedia/en/a/a6/Size_Small.PNG" onDrag={this.props.handle.bind(this.state.vidurl)}></img> //trying to send state value from here
}
});
React.renderComponent(<APP />, document.body);
Run Code Online (Sandbox Code Playgroud)
我希望我的代码清楚.
如果我将模板ID硬编码为id ="popover00.html",则popover有效但是当从ng-repeat生成相同的id时它不起作用.它正在服务器上查找文件.
Popover作品:
<div ng-repeat="(keyT, T) in Tdata track by $index">
<div ng-repeat="(keyS,S) in Sdata track by $index" popover-trigger="mouseenter" uib-popover-template={{"'popover"+keyT+keyS+".html'"}} >
<script type="text/ng-template" id="popover00.html">
<div>
This is an HTML <b>template</b><br>
</div>
</script>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
弹出不工作:
<div ng-repeat="(keyT, T) in Tdata track by $index">
<div ng-repeat="(keyS,S) in Sdata track by $index" popover-trigger="mouseenter" uib-popover-template={{"'popover"+keyT+keyS+".html'"}} >
<script type="text/ng-template" id={{"popover"+keyT+keyS+".html"}}>
<div>
This is an HTML <b>template</b><br>
</div>
</script>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)