您的位置：首页 > Web前端 > React

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

2017-09-25 11:44 881 查看

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 父子通讯

相关文章推荐

新的分享

章节导航