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 相关文章推荐
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
详解TypeScript的基础类型
Feb 18 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实现网上点歌(二)
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python 文件重命名工具代码
2009/07/26 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
基于python实现坦克大战游戏
2020/10/27 Python
彻底解决Python包下载慢问题
2020/11/15 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
个人三严三实对照检查材料
2014/09/25 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2015年中秋寄语
2015/07/31 职场文书
golang中的空slice案例
2021/04/27 Golang
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
MySQL优化之慢日志查询
2022/06/10 MySQL