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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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+mysql留言本源码
2009/11/11 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
js数组操作学习总结
2013/11/04 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JavaScript正则表达式和级联效果
2017/09/14 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python中asyncore的用法实例
2014/09/29 Python
Python文件处理
2016/02/29 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
铭立家具面试题
2012/12/06 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
公司委托书范本
2014/04/04 职场文书
背起爸爸上学观后感
2015/06/08 职场文书