React学习(一)父子组件通讯
React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props;
实现父子组件双向数据流整体的思路是:
1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数
2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去
图形表示的话:大概长这样
newState通过父组件的回调函数传递回去
下面是我自己写的一个便签实例:
//Note组件代码:
import React,{Component} from 'react';
import { render } from 'react-dom';
class EditPanel extends Component{ //子组件
constructor(props){
super(props);
this.state=this.props.item;//通过props初始化编辑便签子组件的state
this.handleEditFinish=this.handleEditFinish.bind(this);
}
handleEditFinish(e){
var date=new Date();
var newState={
content:e.target.previousSibling.value,
date:date.toLocaleDateString()
}
this.props.onChange(newState);//回调函数传递参数给父组件
}
render(){
return(
<div className="edit-panel" style={{display:this.props.item.edit?"block":"none"}}>//子组件的显示由父组件控制
<textarea cols="30" rows="10" defaultValue={this.state.content} />
<a href="#" onClick={this.handleEditFinish}>完成</a>
</div>
)
}
} class Note extends Component{ //父组件
constructor(props){
super(props);
this.state={
content:this.props.content,
date:this.props.date,
edit:false
}
this.handleEdit=this.handleEdit.bind(this);
this.handleDelete=this.handleDelete.bind(this);
this.handleChildChange=this.handleChildChange.bind(this); //监听子组件变化
}
handleChildChange(newState){ //处理子函数传回来的state,改变自身的state
if(newState){
this.setState(newState);
this.setState({
edit:false
})
}
}
handleEdit(e){
e.preventDefault();
this.setState({
edit:true,
})
}
handleDelete(e){
e.preventDefault();
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
}
render() {
return (<div className="note-item">
<p>{this.state.content}</p>
<p>{this.state.date}</p>
<a href="#" onClick={this.handleEdit}>编辑</a>
<a href="#" onClick={this.handleDelete}>删除</a>
<EditPanel item={this.state} onChange={this.handleChildChange}/>
</div>
)
}
}
export default Note;
具体工程代码可以看github,需要注意的是this是一定要绑定的!绑定方式有两种,一种是我上面的在构造函数里面绑定一种使用箭头函数:
handleEdit=()=>{[native code...]}
React学习(一)父子组件通讯的更多相关文章
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- Angular6 基础(数据绑定、生命周期、父子组件通讯、响应式编程)
Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等).Angular引入了依赖注入.单元测试.类等后 ...
- 【JAVASCRIPT】React学习- 数据流(组件通信)
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
- React -- 3/100 】组件通讯
通讯 | props | prop-types 组件通讯 Props: 组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props /* class */ .parent-box ...
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
- vue学习--父子组件通讯
this.$parent // 子组件访问父组件 this.$root // 访问根实例 this.$children // 父组件的所有子元素 *一 ...
- Angular组件——父子组件通讯
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...
- Vue中父子组件通讯——组件todolist
一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...
随机推荐
- CentOS 安装mysql-5.7.10(glibc版)
注:所有shell命令都以root用户执行. 一.下载 shell> cd /home/user/Downloads shell> wget http://mirrors.sohu.com ...
- 细心!SQL语句进行运算时使用字符串时缺失精度的细节!
昨天没有更新,特此来说明下原因,昨天回到家时已经甚晚,正逢公司这几天项目比较紧张(bug多,赶需求,看着bug单齐刷刷的转过来,心都颤抖了一下),没有及时准备素材,今天又加了一天班(现在还在公司,偷个 ...
- javascript 数组的部分常用属性用法
数组 检测数组(返回布尔类型 a. instanceof(); 检测是否是数组对象 console.log(arr instanceof Array) ; b. Array.isArray() ,H5 ...
- shell中的条件表达式
条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] [[expression]] test expression 这三种条件表达式的效果是一样的 比较符 整数比 ...
- 在docker container中运行docker-compose
为了保持宿主主机的环境干净,因此将docker-compose安装到一个基于centos7.3的容器之中,因为tianchao屏蔽了amazonaws,最后选择了通过pip方式来安装,这也是官方推荐的 ...
- 【iOS】7.4 定位服务->3.1 地图框架MapKit 功能1:地图展示
> 本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. --- > 本文相关目录: ================== 所属文集:[[ ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- PRINCE2重要性--光环国际培训
项目的重要性 答:对于当今的组织来说,一个关键的挑战,就是能够成功地平衡以下两个并存的.互相竞争的方面:保持现有的商业运营--盈利能力.服务质量.客户关系.品牌忠实度.生产效率.市场信心等,这些被称为 ...
- Mesos+Zookeeper+Marathon+Docker分布式集群管理最佳实践
参考赵班长的unixhot以及马亮blog 笔者QQ:572891887 Linux架构交流群:471443208 1.1Mesos简介 Mesos是Apache下的开源分布式资源管理框架,它被称为分 ...
- 初识Object-C
Object-C是苹果推出用来开发苹果软件的一门编程语言.大学学了3年的JAVA,到了大四毅然决然的放弃JAVA,是因为第一次接触Object-C就被它的简单语法吸引了.其实不仅仅是语法简单,相对于A ...