我喜欢在事件触发onDrag上将子属性的属性/ props / state值从子组件发送到父组件.我找不到合适的文件.
这是我的代码:
/*** @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);
我希望我的代码清楚.
解决方法
在App组件中这一行
<videos handle={this.handleDrag(vidurl)} />
不正确,应该传递函数回调而不是调用函数.
在VideoForm这一行
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
是不正确的,this.props.handle是父回调,应该只调用this.props.handle(this.state.videoUrl)
正确实施:
var APP = React.createClass({ getInitialState:function() { return {url:'http://www.youtube.com/embed/XGSy3_Czz8k'} },// Parent callback,pass this function to the child component handleDrag:function(videoUrl) { alert(videoUrl); },render: function() { return ( <div> <Videos handle={this.handleDrag} /> </div> ); }) var Videos = React.createClass({ getInitialState:function() { return {vidurl:'http://www.youtube.com/embed/XGSy3_Czz8k'} },handleChanged: function(event) { if(this.props.handle) { this.props.handle(this.state.videoUrl); } },render:function() { return <img src="http://upload.wikimedia.org/wikipedia/en/a/a6/Size_Small.PNG" onDrag={this.handleChanged}></img> //trying to send state value from here } });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。