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 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;

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;