React父子組件間的傳值的方法
更新時間:2018年11月13日 14:14:09 作者:Rossy1
在單頁面里面,父子組件傳值是比較常見的,這篇文章主要介紹了React父子組件間的傳值的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
父組件向子組件傳值:
父組件:
import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默認值0", txt1:"默認值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
補充:
子組件向父組件傳值,
同樣是父組件:
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是異步操作,但是我們可以在它的回調函數(shù)里面進行操作 }); } render() { return ( <div> //通過綁定事件進行值的運算,這個地方一定要記得.bind(this), 不然會報錯,切記切記,因為通過事件傳遞的時候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)//這個地方把值傳遞給了props的事件當中 } render() { return ( <div className="list"> <ul> { this.props.arr.map(item => { return ( <li key={item.userName}> {item.userName} 評論是:{item.text} </li> ) }) } </ul> //通過事件進行傳值,如果想得到event,可以在參數(shù)最后加一個event, 這個地方還是要強調,this,this,this <button onClick={this.clickFun.bind(this, this.state.childText)}> click me </button> </div> ) } } export default ComentList;
before:
after:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
React使用高階組件與Hooks實現(xiàn)權限攔截教程詳細分析
高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React高階組件使用小結,一起看看吧2023-01-01一文教會你用redux實現(xiàn)computed計算屬性
在computed中,可以定義一些屬性,即計算屬性,下面這篇文章主要給大家介紹了關于如何利用redux實現(xiàn)computed計算屬性的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05解決React在安裝antd之后出現(xiàn)的Can''t resolve ''./locale''問題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現(xiàn)的Can't resolve './locale'問題,本文給大家分享解決方案,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05詳解使用create-react-app添加css modules、sasss和antd
這篇文章主要介紹了詳解使用create-react-app添加css modules、sasss和antd,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07