react 父子传值_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(

传值给子组件

接受子组件的传值为：{this.state.txt1}

)

}

}

子组件：

import React, { Component } from 'react';

class child extends Component{

constructor(props) {

super(props);

this.state = {

msg:"啦啦啦啦"

}

}

componentDidMount(){

}

render(){

return(

接受父组件传的值为：{this.props.message}

this.props.getsonToPar(this.state.msg)}>传值给父组件

)

}

}

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 (

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

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

text is {this.state.parentText}

)

}

}

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 (

{

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

return (

{item.userName} 评论是:{item.text}

)

})

}

//通过事件进行传值，如果想得到event，可以在参数最后加一个event，

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

click me

)

}

}

export default ComentList;

before：

after：

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