使用React怎么實現(xiàn)父子組件間傳值

本篇文章為大家展示了使用React怎么實現(xiàn)父子組件間傳值，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

網(wǎng)站建設公司,為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及定制網(wǎng)站建設服務,專注于成都企業(yè)網(wǎng)站定制,高端網(wǎng)頁制作,對加固等多個行業(yè)擁有豐富的網(wǎng)站建設經(jīng)驗的網(wǎng)站建設公司。專業(yè)網(wǎng)站設計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營銷優(yōu)化,H5建站,響應式網(wǎng)站。

父組件向子組件傳值：

父組件：

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是異步操作，但是我們可以在它的回調(diào)函數(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，

    這個地方還是要強調(diào)，this，this，this

    <button onClick={this.clickFun.bind(this, this.state.childText)}>

     click me

    </button>

   </div>

  )

 }

}
export default ComentList;

before：

after：

上述內(nèi)容就是使用React怎么實現(xiàn)父子組件間傳值，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：使用React怎么實現(xiàn)父子組件間傳值
標題鏈接：http://www.muchs.cn/article38/pgdgpp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、品牌網(wǎng)站建設、服務器托管、云服務器、定制網(wǎng)站、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)