react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼
更新時(shí)間：2017年09月25日 11:44:53 作者：八bug哥哥
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼，
react.js我自己還在摸索學(xué)習(xí)中，碰到父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的問題，研究了一下，分享給大家，也給自己留個(gè)筆記：
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>
)
}
}
/*
* 大家默認(rèn)規(guī)定的一些步驟，方便大家看
* 1.默認(rèn)值
* 2.初始化狀態(tài)
* 3.鉤子函數(shù)
* 4.方法函數(shù)
* */
class Counter extends Component{
//默認(rèn)屬性對(duì)象
static defaultProps={
number:5
}
constructor(props){
super(props);
//獲取我的初始狀態(tài)
this.state={
number:props.number
}
}
//鉤子函數(shù)
componentWillMount(){
console.log('組件將要掛載')
}
componentDidMount(){
console.log("組件掛載完成")
}
handleClick=()=>{
//this.setState方法是異步的，一個(gè)函數(shù)里面只能調(diào)用一次this.setState方法
//調(diào)用多次會(huì)合并，只執(zhí)行一次
this.setState((prev,next)=>({
//上一次的狀態(tài)prev
number:prev.number+1
}),()=>{
console.log("回調(diào)函數(shù)執(zhí)行")
})
// this.setState({index:this.state.index+1})
}
render(){
//調(diào)用子組件ChildCounter，把當(dāng)前狀態(tài)值傳過去
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"))
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了深入理解react-router@4.0 使用和源碼解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
useReducer?createContext代替Redux原理示例解析
這篇文章主要為大家介紹了useReducer?createContext代替Redux原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Redux thunk中間件及執(zhí)行原理詳細(xì)分析
redux的核心概念其實(shí)很簡單：將需要修改的state都存入到store里，發(fā)起一個(gè)action用來描述發(fā)生了什么，用reducers描述action如何改變state tree，這篇文章主要介紹了Redux thunk中間件及執(zhí)行原理分析2022-09-09
React?component.forceUpdate()強(qiáng)制重新渲染方式
這篇文章主要介紹了React?component.forceUpdate()強(qiáng)制重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法
這篇文章主要介紹了用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了一個(gè)基于react的圖片裁剪組件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹了React18之狀態(tài)批處理的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細(xì)介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡潔易懂，對(duì)大家學(xué)習(xí)React有一定的幫助，需要的可以參考一下2023-01-01
解決React報(bào)錯(cuò)`value` prop on `input` should&
這篇文章主要為大家介紹了React報(bào)錯(cuò)`value` prop on `input` should not be null解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12