欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React父子组件间的传值的方法

程序员文章站 2023-10-29 15:10:58
父组件向子组件传值: 父组件: import react, { component } from 'react'; import child from '...

父组件向子组件传值:

父组件:

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是异步操作,但是我们可以在它的回调函数里面进行操作

  });

 

 }
 render() {

  return (

   <div>

    //通过绑定事件进行值的运算,这个地方一定要记得.bind(this),

   不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变

    <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,可以在参数最后加一个event,

    这个地方还是要强调,this,this,this

    <button onclick={this.clickfun.bind(this, this.state.childtext)}>

     click me

    </button>

   </div>

  )

 }

}
export default comentlist;  

before:

React父子组件间的传值的方法

after:

React父子组件间的传值的方法

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