react.js 父子组件数据绑定实时通讯的示例代码


Posted in Javascript onSeptember 25, 2017

react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记:

import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class ChildCounter extends Component{
  render(){
    return(
      <div style={{border:'1px solid red'}}>
        {this.props.count}
      </div>
    )
  }
}
/*
* 大家默认规定的一些步骤,方便大家看
* 1.默认值
* 2.初始化状态
* 3.钩子函数
* 4.方法函数
* */
class Counter extends Component{
  //默认属性对象
  static defaultProps={
    number:5
  }
  constructor(props){
    super(props);
    //获取我的初始状态
    this.state={
      number:props.number
    }
  }
  //钩子函数
  componentWillMount(){
    console.log('组件将要挂载')
  }

  componentDidMount(){
    console.log("组件挂载完成")
  }

  handleClick=()=>{
    //this.setState方法是异步的,一个函数里面只能调用一次this.setState方法
    //调用多次会合并,只执行一次
    this.setState((prev,next)=>({
      //上一次的状态prev
      number:prev.number+1
    }),()=>{
      console.log("回调函数执行")
    })

    // this.setState({index:this.state.index+1})

  }
  render(){
    //调用子组件ChildCounter,把当前状态值传过去
    return(
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>+</button>
        <ChildCounter count={this.state.number}></ChildCounter>
      </div>
    )
  }
}
//渲染到页面
ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
jquery选择器简述
Aug 31 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
react native与webview通信的示例代码
Sep 25 #Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 #Javascript
vuex中使用对象展开运算符的示例
Sep 25 #Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 #Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 #Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 #Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
You might like
一些常用的php函数
2006/12/06 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
基于python监控程序是否关闭
2020/01/14 Python
深入了解Python 变量作用域
2020/07/24 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
公司委托书范本
2014/04/04 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
2014年除四害工作总结
2014/12/06 职场文书
房产公证书
2015/01/23 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
2015年化验室工作总结
2015/04/23 职场文书