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车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Vue中的methods、watch、computed的区别
Nov 26 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
浅谈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
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js 动态选中下拉框
2009/11/26 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
layui分页效果实现代码
2017/05/19 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
关于旷工的检讨书
2014/02/02 职场文书
老师的检讨书
2014/02/23 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
学校端午节活动总结
2015/02/11 职场文书