React 多组件传值props和this
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div> <script type="text/babel">
var AComponent = React.createClass({
handleChange:function(){
console.log(this.refs.inputTxt.value);
this.props.funcSave(this.refs.inputTxt.value);
},
render:function(){
return <input
ref='inputTxt'
onChange={this.handleChafuncSavenge}
type='text'/>;
}
}) var BComponent = React.createClass({
handleClick:function(){
console.log(this.props.funcGet());
},
render:function(){
return <button onClick={this.handleClick}>
{this.props.name}
</button>;
}
}) var MainComponent = React.createClass({
result:0,
save:function(value){
console.log("in mainComponent value is "+value);
this.result = value;
},
get:function(){
return this.result;
},
render:function(){
return <div>
<AComponent funcSave={this.save}/>
<BComponent funcGet={this.get} name='获取输入的值'/>
</div>
}
}) ReactDOM.render(
<MainComponent/>,
document.getElementById('example')
) </script> </body>
</html>
React 多组件传值props和this的更多相关文章
- 【React入门】React父子组件传值demo
公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...
- Vue 父子组件传值 props
1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...
- react 父子组件传值
父组件向子组件传递信息 父组件片段 constructor(props){ super(props) this.state={ message:"我是父组件传来的" } } ren ...
- 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组（列表）循环输出
接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- React子组件与父组件传值
一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...
随机推荐
- 以太坊中的Ghost协议
https://blog.csdn.net/t46414704152abc/article/details/81191804 写得超好,终于弄懂了什么是叔块,怎么确定哪条链最长,以太坊与比特币出块的差 ...
- intellij idea 修改背景保护色&&修改字体&&快捷键大全(转)
文章转自http://blog.csdn.net/hpf911/article/details/16888797 近Idea比较流行,Eclipse因为maven的问题,运行起来非常慢,各种提示也不够 ...
- Qt5.9一个简单的多线程实例（类QThread）（第一种方法）
Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- linux mint软件安装
安装linux mint步骤请自行百度,这里略过....下载地址:https://www.linuxmint.com/edition.php?id=246文档下载:https://www.linuxm ...
- C++ assert断言
assert断言通常用于调试,用法如下: assert(expr); // 当expr==0时,系统会调用abort来终止程序运行 调试完成后,可以在include <assert.h>之 ...
- C语言程序设计II—第六周教学
第六周教学总结(1/4-7/4) 教学内容 本周的教学内容为:第八章 指针 8.1 密码开锁(知识点:指针和指针变量的概念),8.2 角色互换(知识点:指针作为函数的参数返回多个值) 重点.难点:指针 ...
- JDBC使用MYSQL的LOAD DATA LOACAL INFILE和LOAD DATA INFILE
MYSQL的LOAD方法都必须建立在mysql服务允许使用该命令的情况下: 开启该命令的方法: 1.在实例对应的my.cnf(windows为my.ini)中添加一行local-infile=1(默认 ...
- Nowcoder186C 失衡天平 背包
题目传送门 题意:给你$N$个数,你可以将其划分为若干对集合(这里所说的集合允许数字重复)(即集合是两个集合两个集合出现),每对集合中两个集合所有元素的和的差的绝对值不超过$M$,可以有数字不在集合内 ...
- Zookeeper-集群与单机实践
我用的是linux,CentOS7.3,zookeeper的版本是3.4.6,工具XShell.上传zookeeper的压缩包后我们开始操作. 集群模式: 1.解压zookeeper,路径随意 tar ...