react 子传参父_React 子组件向父组件传值的方法

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

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

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

//子组件

var Child = React.createClass({

render: function(){

return (

邮箱:

)

}

});

//父组件

var Parent = React.createClass({

getInitialState: function(){

return {

email: ''

}

},

handleEmail: function(event){

this.setState({email: event.target.value});

},

render: function(){

return (

邮箱:{this.state.email}

)

}

});

React.render(

,

document.getElementById('test')

);

原理:

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

分析:

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

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

时间: 2017-07-22

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/555052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQ事务

事务 事务是访问数据库的一个操作序列,事务的正确执行使得数据库从一种状态转换为另一种状态。事务必须服从ACID原则。原子性(atomicity)、一致性(consistency)、隔离性(isolation)、持久性(durability)。 原子性:不可分割,事务要么全部被执…

boost互斥锁_boost锁使用总结

boost锁的概述:boost库中提供了mutex类与lock类,通过组合可以轻易的构建读写锁与互斥锁。举个通俗的例子,如果共享资源是一个自动锁住的房间,互斥体是钥匙,进入房间必须取钥匙,离开房间应该还钥匙。这就对应…

MySQL 是如何实现四大隔离级别的?

MySQL 是如何实现四大隔离级别的? 在mvcc下,mysql中用到的锁还是共享锁和排他锁么?如果是的话,那么是怎样结合锁和mvcc来实现rc和rr隔离级别的呢?还有mysql中在ru隔离级别下,两个事务同时读取数据对象A&am…

无符号右移负数_关于负数的右移与无符号右移运算小结

对于带符号右移,若为负数,则在存储时首位表示符号位,其值为1,表示该值是负数的移位,在移位过程中,高位补1,若符号位是0,表示是正数,在移位过程中高位补零,两者的前提是符号位保持不变:对于负数的右移:因为负数在内存中是以补码形式存在的,所有首先根据负…

Linux命令 移动/复制文件/目录到指定目录下

1、同一个服务器下复制文件或文件夹 1.1 复制文件 复制文件:把1.txt 复制到根目录下的sbin目录 cp 文件名(可带路径)目标路径(带路径)如:cp 1.txt ~/sbin/1,2 复制目录 复制目录:把relea…

springboot2稳定版本_重要版本Spring Boot 2.3.0发布 - spring.io

重要版本Spring Boot 2.3.0于2020年5月15日发布,此版本增加了大量新功能和改进。有关完整的升级说明以及新的和值得注意的功能,请参阅发行说明。2.3的新功能依赖升级Spring Boot 2.3移至几个Spring项目的新版本:Spring Data NeumannSpring HA…

正则表达式——手机号

手机表达式: /^13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/ 可以校验 11为手机号,包含了大部分号段 座机表达式: /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})(-[0-9]{1,4}){0,1}$/可以校验 区号-电话-分机 上面两条…

Caused by: org.springframework.context.annotation.ConflictingBeanDefinitionException

异常信息: org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean name BusinessAccountController for bean class [com.hs.BusinessAccountController] conflicts with existing, non-compatible bean definit…

c mysql web开发实例教程_Web开发(六)MySql

数据库简介数据库(DB)数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合。数据库中的数据按一定的数学模型组织、描述和存储,具有较小的冗余,较高的数据独立性和易扩展性,并可为各种…

Git——工作中使用命令详解

1、Linux常用命令 cd:改变目录cd…:返回上级目录pwd:显示当前目录clear:清屏ls:显示当前目录所有文件touch:添加文件rm:删除文件mkdir:新建文件夹rm -r:删除文件夹mv&am…

mac11.14 mysql_mysql 5.7 11 章 数据类型(1)

前言 这是 一篇mysql 5.7 官方手册的部分翻译,目的加强自己的理解 ,和 提升英文水平。不保证质量,速度。部分我感觉没有多大用处的部分没有做翻译。英语手册地址 https://dev.mysql.com/doc/refman/5.7/en/data-types.html------------------…

Java中常见null简析

对于每一个Java程序员来说,null肯定是一个让人头痛的东西,今天就来总结一下Java中关于null的知识。 1.null不属于任何类型,可以被转换成任何类型,但是用instanceof永远返回false. 2.null永远不能和八大基本数据类型进行赋值运算等,否则不是编译出错,就是运行出错. 3.null可以…

怎么从mysql注册表删除用户_mysql 创建和删除用户

1.远程登录mysqlmysql -h ip -u root -p 密码2.创建用户格式:grant 权限 on 数据库.* to 用户名登录主机 identified by "密码";例1:增加一个test1用户,密码为123456,可以在任何主机上登录,并对所…

服务报错:java.sql.SQLException: Field ‘***‘ doesn‘t have a default value

完整异常 java.lang.RuntimeException: org.springframework.dao.DataIntegrityViolationException:Error updating database. Cause: java.sql.SQLException: Field ‘***’ doesn’t have a default value 问题原因 后端接实体类无默认值,但是前端未传参&#xf…

centos php-mysql_centOS 下安装php和mysql

使用yum install php,yum install mysql安装apache:yum install httpd httpd-devel启动apache:/etc/init.d/httpd start此时输入服务器的IP地址,应该看到apache的服务页面,端口不用输,apache默认就是使用80端口安装mysql:yum install mysql m…

Chrome浏览器F5和ctrl+F5的区别

一、正常重新加载(F5,Ctrl R,在地址栏回车,点击链接) 本节中的操作:根据缓存的缓存策略,进行处理。如果缓存没过期,就不向浏览器发请求,而是直接使用缓存。 F5或Contr…

mysql 自动生成mapper_自动生成实体类、Mapper、Mapper.xml文件

自动生成实体类、Mapper、Mapper.xml文件搭建Spring Boot Mysql MyBatis 项目核心配置pom.xml创建表配置文件生成文件结果项目结构搭建Spring Boot Mysql MyBatis 项目idea 可直接创建相应的项目及配置核心配置pom.xmlmysqlmysql-connector-java5.1.38org.springframework.…

使用Postman进行简单压力测试

使用Postman可以对服务端接口进行简单的压力测试,步骤如下: 1.配置好一个请求接口,保存在一个collection中; 2.点击Tests,添加断言检查点; 3.点击Runner按钮,打开Collection Runner界面&#…

mysql取消主从配置_mysql主从配置

搭建环境:master 192.168.127.131slave 192.168.127.128主从配置的前提:两个数据库的数据需要一模一样所以我们:在主上面建立一个数据库 在这里我们用mysql备份一下mysqldump db1 >123.sql (备份)在主上面建立一个数据库db1需要登录数据…

HTTP状态码——413

status code:413 Request Entiry Too large上传文件失败,报上面的错:请求实体太大。 原因:nginx有个参数client_max_body_size在限制请求实体的大小,把它改大点就好了。 {如果配置文件没有这个参数,应该会…