React父子組件間的傳值的方法
父組件向子組件傳值:
父組件:
import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默認(rèn)值0", txt1:"默認(rèn)值1" } } componentDidMount(){ } parToson(){ this.setState({ txt0:"哈哈哈哈" }) } sonToPar(e){ this.setState({ txt1:e }) } render(){ const style={ paddingLeft:"150px" } return( <div style={style}> <button onClick={this.parToson.bind(this)}>傳值給子組件</button> <div>接受子組件的傳值為:{this.state.txt1}</div> <br/> <Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/> </div> ) } }
子組件:
import React, { Component } from 'react'; class child extends Component{ constructor(props) { super(props); this.state = { msg:"啦啦啦啦" } } componentDidMount(){ } render(){ return( <div> <div>接受父組件傳的值為:{this.props.message}</div> <button onClick={()=>this.props.getsonToPar(this.state.msg)}>傳值給父組件</button> </div> ) } } export default child;
github:https://github.com/Rossy11/react/blob/master/src/component/router4.js
補(bǔ)充:
子組件向父組件傳值,
同樣是父組件:
import React from "react" import ComentList from "./ComentList" class Comment extends React.Component { constructor(props) { super(props); this.state = { parentText: "this is parent text", arr: [{ "userName": "fangMing", "text": "123333", "result": true }, { "userName": "zhangSan", "text": "345555", "result": false }, { "userName": "liSi", "text": "567777", "result": true }, { "userName": "wangWu", "text": "789999", "result": true },] } } fn(data) { this.setState({ parentText: data //把父組件中的parentText替換為子組件傳遞的值 },() =>{ console.log(this.state.parentText);//setState是異步操作,但是我們可以在它的回調(diào)函數(shù)里面進(jìn)行操作 }); } render() { return ( <div> //通過(guò)綁定事件進(jìn)行值的運(yùn)算,這個(gè)地方一定要記得.bind(this), 不然會(huì)報(bào)錯(cuò),切記切記,因?yàn)橥ㄟ^(guò)事件傳遞的時(shí)候this的指向已經(jīng)改變 <ComentList arr={this.state.arr} pfn={this.fn.bind(this)}> </ComentList> <p> text is {this.state.parentText} </p> </div> ) } } export default Comment;
子組件:
import React from "react" class ComentList extends React.Component { constructor(props) { super(props); this.state = ({ childText: "this is child text" }) } clickFun(text) { this.props.pfn(text)//這個(gè)地方把值傳遞給了props的事件當(dāng)中 } render() { return ( <div className="list"> <ul> { this.props.arr.map(item => { return ( <li key={item.userName}> {item.userName} 評(píng)論是:{item.text} </li> ) }) } </ul> //通過(guò)事件進(jìn)行傳值,如果想得到event,可以在參數(shù)最后加一個(gè)event, 這個(gè)地方還是要強(qiáng)調(diào),this,this,this <button onClick={this.clickFun.bind(this, this.state.childText)}> click me </button> </div> ) } } export default ComentList;
before:
after:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React使用高階組件與Hooks實(shí)現(xiàn)權(quán)限攔截教程詳細(xì)分析
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件(功能增強(qiáng)的組件)的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù),并不是組件,這一點(diǎn)一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧2023-01-01一文教會(huì)你用redux實(shí)現(xiàn)computed計(jì)算屬性
在computed中,可以定義一些屬性,即計(jì)算屬性,下面這篇文章主要給大家介紹了關(guān)于如何利用redux實(shí)現(xiàn)computed計(jì)算屬性的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能
創(chuàng)建一個(gè)組件,實(shí)時(shí)展示時(shí)分秒,并且動(dòng)態(tài)更新數(shù)據(jù),這篇文章主要介紹了React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能,需要的朋友可以參考下2024-07-07解決React在安裝antd之后出現(xiàn)的Can''t resolve ''./locale''問(wèn)題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現(xiàn)的Can't resolve './locale'問(wèn)題,本文給大家分享解決方案,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景
這篇文章主要介紹了react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07詳解使用create-react-app添加css modules、sasss和antd
這篇文章主要介紹了詳解使用create-react-app添加css modules、sasss和antd,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07