react.js 父子组件数据绑定实时通讯

Posted 2020-10-08 学

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