React 子组件向父组件传值的方法


Posted in Javascript onJuly 24, 2017

本文介绍了React 子组件向父组件传值的方法,分享给大家

子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。

/***实现在输入框输入邮箱时,在div中即时显示输入内容***/


<body>
  <div id="test"></div>
</body>

//子组件
var Child = React.createClass({
  render: function(){
    return (
      <div>
        邮箱:<input onChange={this.props.handleEmail}/>
      </div>
    )
  }
});

//父组件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <div>
        <div>邮箱:{this.state.email}</div>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </div>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById('test')
);

原理:

依赖 props 来传递事件的引用,并通过回调的方式来实现的,这样实现不是特别好,但在没有任何工具的情况下是一种简单的实现方式。

分析:

React中当state发生改变时,组件才会update。在父组件中设定state的初始值以及处理该state的函数,同时将函数名通过以props属性值的形式传入子组件,子组件通过调用父组件的函数,进而引起state变化,达到在父组件中展示子组件产生的变化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 #Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 #Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
php register_shutdown_function函数详解
Jul 23 #Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 #Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 #Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
关于逃课的检讨书
2014/01/23 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
入学申请自荐信范文
2014/02/26 职场文书
难忘的一课教学反思
2014/04/30 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python