React组件之间的通信的实例代码
最近学习浅尝则止的学习了一下react.js这个UI的框架,react这个库给我的最大的感觉就是它能够完全的接管UI层,在要改变视图的东西的时候只需要改变其this.state中的状态。只要操作数据层的东西视图层就会发生变化,这一点我还是很喜欢的。可以摆脱对DOM的直接操作,毕竟直接来会比较复杂,本来应该是逻辑层js中混杂着各种css的字符串,对于我来说有点不爽(JSX中也混杂这标签,但我觉的不应该把它看作标签,看作语句会习惯一点)。
回到几天的重点,讲react组件之间的状态传递。
上代码:
1.定义两个子组件child-1和child-2
//child-1 子组件-1为输入框 class Input extends React.Component{ constructor(...args){ super(...args); } render(){ return <input type="text"/> } } //child-2 子组-2为显示框 class Show extends React.Component{ constructor(...args){ super(...args); } render(){ return <p></p> } }
2.定义父组件Parent并且将两个子组件插入到父组件中
class Parent extends React.Component{ constructor(...args){ super(...args); } render(){ return( <div> <Input}/> <Show/> </div> ); } }
现在的任务是在组件1总输入一些文字,同时在组件2中同时显示出来。
分析:要让组件2与组件1同步,就让组件1和2都去绑定父组件的状态。也就是说让两个组件受控。数据的走向是,组件1将自身的数据提升到父层,并且保存在父层的状态中。父层中的数据通过组件2中的props属性传递到组件2中,并在视图层进行绑定。
第一步先绑定<Show/>组件
//在父层中的constructor中定义状态为一个空的message,this.state = {message:''} class Parent extends React.Component{ constructor(...args){ super(...args); this.state = { message:'' }
然后在父组件中的<Show/>改为
<Show onShow={this.state.message}/>
接着来我们进入到<Show/>组件中,给其内容绑定这个穿件来的onShow属性。<Show/>组件变为
class Show extends React.Component{ constructor(...args){ super(...args); } render(){ return <p>{this.props.onShow}</p> }
这样组件2显示层的数据已经绑定好了,接下来我们只要改变父亲层状态中的message的内容就可以使绑定的显示层的内容跟着一起变化
将输入层的状态(数据)提升到父亲组件中.下面是改写后的组件1
class Input extends React.Component{ constructor(...args){ super(...args); } //将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp() fn(ev){ this.props.onInp(ev.target.value); } render(){ //用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数 return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/> } }
看到这里可能会有一个问题:onInp()和content没有啊?不要急,接着看
接着改写父组件中的输入层子组件1,
class Parent extends React.Component{ constructor(...args){ super(...args); this.state = { message:'' }; } //传进的text是其提升上来的状态,然后再更新父组件的状态 fn(text){ this.setState({ message:text }) } render(){ return( <div> /* onInp就出现在这里,并绑定一个函数, 并且有一个content将父组件的状态同步到子组件中 */ <Input onInp={this.fn.bind(this)} content={this.state.message}/> <Show onShow={this.state.message}/> </div> ); } }
写完的代码是这样的
// 父组 class Parent extends React.Component{ constructor(...args){ super(...args); this.state = { message:'' }; } onInp(text){ this.setState({ message:text }) } render(){ return( <div> <Input onInp={this.onInp.bind(this)} content={this.state.message}/> <Show onShow={this.state.message}/> </div> ); } } //child-1 class Input extends React.Component{ constructor(...args){ super(...args); } fn(ev){ this.props.onInp(ev.target.value); } render(){ return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/> } } //child-2 class Show extends React.Component{ constructor(...args){ super(...args); } render(){ return <p>{this.props.onShow}</p> } } //最后渲染出 ReactDOM.render( <Parent/>, document.getElementById('app') );
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Day1上午解题报告
- 【 关关的刷题日记51】 Leetcode 67. Add Binary
- 【 关关的刷题日记53】 Leetcode 100. Same Tree
- Day1下午解题报告
- 【关关的刷题日记54】Leetcode 226. Invert Binary Tree
- Day2上午解题报告
- 【关关的刷题日记55】Leetcode 404. Sum of Left Leaves
- CSS选择器详解
- 前端开发必备之Emmet
- virtualenvwrapper + pyenv 打造多版本 Python 环境
- 【关关的刷题日记56】Leetcode 107 Binary Tree Level Order Traversal II
- 新手Python渗透工具入门
- ReentrantLock 与 AQS 源码分析
- python识别验证码遇到问题解决方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JAVA NIO Channel
- JAVA NIO Scatter/Gather(矢量IO)
- JAVA NIO FileChannel 内存映射文件
- JAVA NIO Socket通道
- Mysql Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operat
- Spring 资源文件处理
- Spring profile配置应用
- Spring Bean的加载
- Spring ApplicationContext 简介
- Spring 配置String转Date
- zookeeper事务
- Thread Object wait() notify()基本
- 基本排序算法(冒泡排序 选择排序 插入排序 快速排序 归并排序 基数排序 希尔排序)
- Java加解密AES、DES、TripleDES、MD5、SHA
- Java 根据经纬度计算两点之间的距离