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

 更新时间:2017年09月25日 11:44:53   作者:八bug哥哥   我要评论
本篇文章主要介绍了react.js 父子组件数据绑定实时通讯的示例代码,

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,jquery,css实现瀑布流布局的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 微信小程序实现图片预览功能

    微信小程序实现图片预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Javascript前端经典的面试题及答案

    Javascript前端经典的面试题及答案

    最近在网上看到了一些关于Javascript的面试题就整理了下来,希望对有需要的朋友或者自己能有一定的帮助,后续看到再继续补充。下面一起来看看这篇关于Javascript前端常见的面试题的文章,一起来学习学习吧。
    2017-03-03
  • javascript add event remove event

    javascript add event remove event

    javascript事件绑定和删除功能代码
    2008-04-04
  • js获取html的span标签的值方法(超简单)

    js获取html的span标签的值方法(超简单)

    下面小编就为大家带来一篇js获取html的span标签的值方法(超简单)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 谈一谈javascript中继承的多种方式

    谈一谈javascript中继承的多种方式

    本文就和大家谈一谈javascript中的继承,什么是继承,继承的作用,以及js继承的实现代码,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 使用canvas及js简单生成验证码方法

    使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码
    2017-04-04
  • 原生js仿jquery实现对Ajax的封装

    原生js仿jquery实现对Ajax的封装

    大家都知道jquery在我们日常开发中的使用频率非常高,但jquery说到底还是对js的封装,我们不能光会使用,只有知道了其中的远离才能更好的使用,所以这篇文章主要介绍的是原生js仿jquery实现对Ajax封装的方法。
    2016-10-10
  • javascript设计模式之中介者模式学习笔记

    javascript设计模式之中介者模式学习笔记

    这篇文章主要为大家详细介绍了javascript设计模式之中介者模式学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS查找英文文章中出现频率最高的单词

    JS查找英文文章中出现频率最高的单词

    这篇文章主要为大家详细介绍了JS查找英文文章中出现频率最高的单词,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论