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

前端之家收集整理的这篇文章主要介绍了react.js 父子组件数据绑定实时通讯的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

class ChildCounter extends Component{
render(){
return(
<div style={{border:'1px solid red'}}>
{this.props.count}

) } } /* * 大家默认规定的一些步骤,方便大家看 * 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(

{this.state.number}

) } } //渲染到页面 ReactDOM.render(,document.querySelector("#root"))

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

猜你在找的JavaScript相关文章