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> 请输入邮箱:< ...
随机推荐
- python3 day03 大纲
一. 上次课内容回顾 1. 格式化输出 %d 占位数字 %s 占位字符串 %f 占位小数 "jfklasjkfj%s %d %f" % (值1, 值2, 值3) "{}爱 ...
- BTREE这种Mysql默认的索引方式，具有普遍的适用性
文章转自 https://blog.csdn.net/caomiao2006/article/details/52145477 Mysql目前主要有以下几种索引方式:FULLTEXT,HASH,BTR ...
- CVE-2018-14424 use-after-free of disposed transient displays 分析报告
漏洞描述 GDM守护进程不能正确的取消导出在D-Bus 接口上已经被销毁的display对象,这造成本地用户可以触发UAF,从而使系统崩溃或造成任意代码执行. 调试环境 gdm版本: 3.14.2(通 ...
- java 转换流 打印流 数据流
转换流 InputStreamReader 和 OutputStreamWriter处理流用于将字节流转化成字符流,字符流与字节流之间的桥梁InputStreamReader 的作用是把 InputS ...
- [04] 高级映射 association和collection
之前我们提到的映射,都是简单的字段和对象属性一对一,假设对象的属性也是一个对象,即涉及到两个表的关联,此时应该如何进行映射处理? 先看两张表,author 和 book: 业务上对应关系为,一个 ...
- mysql 5.7 版本的安装
目录 一.概述 二.MySQL安装 三.安装成功验证 四.NavicatforMySQL下载及使用 一.概述 MySQL版本:5.7.17 下载地址:http://rj.baidu.com/soft/ ...
- asp.net web api集成微信服务（使用Senparc微信SDK）- z
/// <summary> /// 微信请求转发控制器 /// </summary> [RoutePrefix("weixin")] public clas ...
- LiveCharts文档-1前言
原文:LiveCharts文档-1前言 LiveCharts文档-1前言 最近做一个企业应用,客户端使用的是WPF,需要生成一个漂亮的统计图表,以前WinForm有Chart控件,但是微软貌似没有弄W ...
- odoo 11 实现多个字段对应一个查询参数的查询
在整理英语单词开发模块的过程中,有这样一个需求,就是我在查询界面里输入一个查询的值A,这个A可能是下面的任何一个值 1.一个英语单词 2.汉语文字 3.一个英语单词的部分 这里有两张表:engli ...
- NOIP常见模板集合
Preface 这篇博客记录的是我联赛前虽然只有两天了的打板子记录. 只求真的能给我起到些作用吧,一般按照难度排序. 而且从这篇博客开始我会用H3的标题代替H4 为了节约篇幅,以下的代码一般均以cla ...