当前位置:首页 > 日记 > 正文

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

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"))

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

相关文章

jQuery滚动插件scrollable.js用法

jQuery滚动插件scrollable.js用法

插件,电脑软件,jQuery,js,scrollable,本文实例讲述了jQuery滚动插件scrollable.js用法。分享给大家供大家参考,具体如下:Scrollable是一个灵活、轻量级用于创建滚动内容的jQuery插件。任何内容(HTML、视频、文件、图片等...)都可以作为一个滚动…

ppt中怎么播放多种格式的视频

ppt中怎么播放多种格式的视频

多种,格式,视频,电脑软件,ppt,  ppt中怎么播放多种格式的视频?我们在ppt中插入视频文件的方法都是点击菜单栏--插入,然后把本地视频上传进去。不过这样的方法也不全面,有些格式的视频传上去并不能播放。下面小编就教你ppt中播放多种格式的…

APACHE支持.htaccess方法

APACHE支持.htaccess方法

方法,支持,电脑软件,APACHE,htaccess,如何让自己的本地APACHE服务器支持".htaccess"呢?其实只要简单修改一下apache的httpd.conf设置就可以让APACHE支持.htaccess了,来看看操作打开httpd.conf文件(在那里? APACHE目录的CONF目录里面),用…

如何在excel表中求和

如何在excel表中求和

如何在,电脑软件,excel,本文简单讲诉3种方法操作excel表中数据的求和使用鼠标选中需要求和的单元格数据使用键盘上面的alt加=号组合键,一起按下组合快捷键后,单元格最后一行显示数据和也可以直接使用鼠标选中所有求和数据后,在表格底部左下方…

解决AJAX请求中含有数组的办法

解决AJAX请求中含有数组的办法

数组,请求,办法,中含有,电脑软件,大家应该都发现了当我们发送AJAX请求的数据中带有数组时,是不能像普通JSON数据一样,直接放在data里发送给后台比如有这样一个数据需要发送给后台:{ "orderId": 22, "resourceJson": [ { "carCa…

浅谈PHP中类和对象的相关函数

浅谈PHP中类和对象的相关函数

函数,类和对象,浅谈,电脑软件,PHP,class_exists 判断一个类是否存在,参数为一个名字!interface_exists 判断一个接口是否存在,参数也是为一个名字!method_exists 判断一个方法是否存在!需要两个:第一个对象变量,第二个是一个方法名! 返回一个布尔值…

windows 2008安装好ftp以后如何配

windows 2008安装好ftp以后如何配

用户权限,配置,装好,电脑软件,windows,安装配置FTP之前你得确认你的IIS已经装好,并且在安装IIS的时候已经安装了FTP服务器和FTP管理控制台。如果你已经确定安装好了,那么就开始下面的步骤:有可能把大家对server08中IIS的位置不太了解,那就先说…

win10使用远程桌面时提示“你的凭

win10使用远程桌面时提示“你的凭

远程桌面,提示,凭据,报错,解决办法,1、首先让我们看下报错的截图:解决办法如下:2、查看所要远程的计算机名,到桌面右键&ldquo;计算机&rdquo;选择属性,在新弹出的窗口中,就可以找到&ldquo;计算机名&rdquo;了,如下两图:右键&ldquo;计算机&rdquo;选择…

Vue关于数据绑定出错解决办法

Vue关于数据绑定出错解决办法

数据绑定,解决办法,电脑软件,Vue,Vue关于数据绑定出错错误提示:相对应的代码:<input id="input-check" type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> <label for="input-check">check</lab…

路由器设置中的arp映射表作用是什

路由器设置中的arp映射表作用是什

映射,设置,路由器,作用,电脑软件,我们常常会通过设置路由器来进行多人同时上网,而在路由器设置中有一个arp映射表,那么这个arp映射表的作用是什么呢,今天学无忧小编给大家来说说有关arp映射表的内容。一、ARP的意思ARP是Address Resolution Pr…

React应用中使用Bootstrap的方法

React应用中使用Bootstrap的方法

方法,电脑软件,React,Bootstrap,前言本节我们将把bootstrap,font-awesome应用到app中,同时创建一个基本的主页。主要将用到以下包:bootstrap-loader及配合工作的一系列loader:bootstrap-sass(bootstrap3) css-loader node-sass sass-loader st…

HTTP 错误 404 - 文件或目录未找到

HTTP 错误 404 - 文件或目录未找到

错误,文件,未找到,目录,电脑软件,MIME设置问题导致某些类型文件无法下载(以ISO为例) 症状举例: HTTP 错误 404 - 文件或目录未找到。 原因分析: IIS6.0取消了对某些MIME类型的支持,例如ISO,致使客户端下载出错。 解决方法: 在IIS中 属…