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

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  ={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  ={()=>this.props.getsonToPar(this.state.msg)}>传值给父组件</button>
   </div>
  )
 }
}

export default child;

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  ={this.clickFun.bind(this, this.state.childText)}>

     click me

    </button>

   </div>

  )

 }

}
export default ComentList;