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"))
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
React-Native之截图组件react-native-view-shot的介绍与使用小结
这篇文章主要介绍了React-Native之截图组件react-native-view-shot的介绍与使用小结,需本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,要的朋友可以参考下2021-08-08React Native 自定义下拉刷新上拉加载的列表的示例
本篇文章主要介绍了React Native 自定义下拉刷新上拉加载的列表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法
这篇文章主要介绍了react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析
这篇文章主要介绍了react 实现图片正在加载中 加载完成 加载失败三个阶段的,通过使用loading的图片来占位,具体原理解析及实现代码跟随小编一起通过本文学习吧2021-05-05
最新评论