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

时间:2021-05-26

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章