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> 请输入邮箱:< ...
随机推荐
- 【js】++i和i++
解析: i++ 执行完语句后再加1 ++i 先加1再执行后面的语句 例如 var i=0; ++i 的值为1 i++的值为0 注意:不管前置++还是后置++,i的值都会发生变化,值为1 例子 1.va ...
- metamascara学习导论
研究了一段时间的metamascara终于有了一点起色,因为前段时间有一个小伙伴问了我一个问题,就是能不能将metamask嵌入到自己设计的网站中,在自己要进行交易的时候也会弹出一个页面来让用户确认这 ...
- WEB安全 - 认识与防御XSS攻击
目录 什么是xss攻击? XSS的危害 XSS攻击分类 xss攻击示例 反射型攻击 - 前端URL参数解析 反射型攻击 - 后端URL参数解析 注入型攻击 - 留言评论 如何规避xss攻击? 总结 什 ...
- 网络流量状态命令总结 (含notp安装)
1. sar -n DEV 1 2 sar命令包含在sysstat工具包中,提供系统的众多统计数据.其在不同的系统上命令有些差异,某些系统提供的sar支持基于网络接口的数据统计,也可以查看设备上每秒收 ...
- Android学习之基础知识十五 — 最佳UI体验(Material Design实战)
一.前言 长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...
- AS导入一个工程出现Error:please select Android SDK的错误
导入一个新的工程出现:Error:please select Android SDK 的错误 现象描述:点击运行程序按钮,弹出一个“Edit Configure”的对话框,最下面报:Error:ple ...
- MySQL(十三)事务处理和字符集
一.事务处理 事务处理(transaction processing):是一种机制,用来维护数据库的完整性,管理必须成批执行的MySQL操作,以保证数据库不包含不完整的操作结果. 这样可以保证一组操作 ...
- Android 解决布局无法对齐的情况
是这样的,在为app制作titlebar或者使用RadioGroup设置布局的的weight属性后,会出现有些机型的手机布局无法居中的问题. 在遇到这类问题时,大部分的原因就是因为没有设置控件的属性: ...
- 前后端交互json字符串
//将需要的参数转成json字符串,然后用utf-8编码 var obj = encodeURIComponent(JSON.stringify(this.categories),"utf- ...
- 重装系统之无法在驱动器0的分区1上安装windows
在通过U盘或光盘安装win8/win8.1/win10 时,遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区也不能解决,进而提示Windows无法安装到这个磁盘,选中 ...