码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-23 17:15:07      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:通讯   执行   stat   ret   bsp   doc   ber   属性   函数   

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.js 父子组件数据绑定实时通讯

标签:通讯   执行   stat   ret   bsp   doc   ber   属性   函数   

原文地址:http://www.cnblogs.com/null11/p/7581565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!