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> 请输入邮箱:< ...
随机推荐
- nginx反向代理与Real-IP和X-Forwarded-For.txt
本文作者张开涛.为保障<亿级流量网站架构核心技术>一书内容的连续性,有些需要读者了解的内容,或者书的补充和引申内容,会通过二维码嵌入的方式引导读者阅读学习.大家可以关注作者公众号“开涛的博 ...
- mysql数据类型介绍(含text,longtext,mediumtext说明)
转自http://m.blog.csdn.net/sipsir/article/details/12343581 转载,文章原连接已经失效,百度快照找到的. MySQL支持大量的列类型,它可以被分为3 ...
- matlab slice
前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...
- 【Codeforces 1110E】Magic Stones
Codeforces 1110 E 题意:给定两个数组,从第一个数组开始,每次可以挑选一个数,把它变化成左右两数之和减去原来的数,问是否可以将第一个数组转化成第二个. 思路: 结论:两个数组可以互相转 ...
- Elastic 技术栈之快速入门
Elastic 技术栈之快速入门 概念 ELK 是什么 ELK 是 elastic 公司旗下三款产品 ElasticSearch .Logstash .Kibana 的首字母组合. ElasticSe ...
- Vue-初步了解vue-router的三要素：路由map 、路由视图、路由导航
安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...
- 各种工业以太网比较（EtherCAT,EtherNet/IP,ProfiNet,Modbus-TCP,Powerlink）
EtherCAT(以太网控制自动化技术)是一个以以太网为基础的开放架构的现场总线系统,EterCAT名称中的CAT为ControlAutomation Technology(控制自动化技术)首字母的缩 ...
- ASP.NET Web API上实现 Web Socket - 转
1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...
- Scala学习(三)练习
Scala数组相关操作&练习 1. 1. 编写一段代码,将a设置为一个包含n个随机整数的数组,要求随机数介于0(包含)和n(不包含)之间 def main (args: Array[Strin ...
- 【Java并发.1】简介
继上一本<深入理解Java虚拟机>之后,学习计划里的另一本书<Java并发编程实战>现在开始学习,并记录学习笔记. 第一章主要内容是介绍 并发 的简介.发展.特点. 编写正确的 ...