import React, { Component } from 'react';
import Child from './chlid';

class parent extends Component{
 constructor(props) {
 super(props);
 this.state = {
 txt0:"默認(rèn)值0",
 txt1:"默認(rèn)值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是異步操作，但是我們可以在它的回調(diào)函數(shù)里面進(jìn)行操作

 });

 

 }
 render() {

 return (

 <div>

 //通過綁定事件進(jìn)行值的運(yùn)算，這個(gè)地方一定要記得.bind(this)，

 不然會(huì)報(bào)錯(cuò)，切記切記，因?yàn)橥ㄟ^事件傳遞的時(shí)候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)//這個(gè)地方把值傳遞給了props的事件當(dāng)中

 }

 render() {

 return (

 <div className="list">

 <ul>

 {

 this.props.arr.map(item => {

 return (

 <li key={item.userName}>

 {item.userName} 評(píng)論是:{item.text}

 </li>

 )

 })

 }

 </ul>

 //通過事件進(jìn)行傳值，如果想得到event，可以在參數(shù)最后加一個(gè)event，

 這個(gè)地方還是要強(qiáng)調(diào)，this，this，this

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

 click me

 </button>

 </div>

 )

 }

}
export default ComentList;