栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

ReactJS中的子父组件通信

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

ReactJS中的子父组件通信

在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  }});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/399670.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号