微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

rush: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}

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

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

原文地址:https://www.jb51.cc/js/36146.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐