React父取子组件的参数

1

Parent

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            childrenMsg: ''
        }
    }

    getChildrenMsg=(result, msg)=>{
        this.setState({
            childrenMsg: msg
        })
    }

    render() {
        return (
            <div style={{display:this.state.childrenMsg}}>
            //当使用父组件向子组建传函数时，不能含参，且调用的函数创建时必须使用箭头函数形式 或者 使用function加bind的形式。
                <Children get={ this.getChildrenMsg } /> 
            </div>
        )
    }
}

Children

import React, {Component} from 'react'

export default class Children extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'none'
        }
    }

    toParent(index){
        console.log(index+1);
        // console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
        this.props.get(this, this.state.msg)
    }

    render() {
        return (
            <div>
            //子组件使用的最稳妥的函数形式，即onClick后跟空箭头函数的形式，这样调用的函数可以使用任何方式创建且不用bind
                <button onClick={()=>this.toParent(2) }>
                子组件传入给父组件</button>
            </div>
        )
    }
}

2 参考连接https://www.jianshu.com/p/ccc15c5963c4

Parent

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件',
            childrenMsg: ''
        }
    }

    getChildrenMsg = (result, msg) => {
        // console.log(result, msg)
        // 很奇怪这里的result就是子组件那bind的第一个参数this，msg是第二个参数
        this.setState({
            childrenMsg: msg
        })
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <h3>子组件传来的值为：{ this.state.childrenMsg }</h3>
                <h3>我要引入子组件了：</h3>
                <hr/>
                <Children parent={ this } />
            </div>
        )
    }
}

Children

import React, {Component} from 'react'

export default class Children extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是子组件',
            msg: '子组件传值给父组件'
        }
    }

    toParent = () => {
        // console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
        this.props.parent.getChildrenMsg(this, this.state.msg)
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <button onClick={ this.toParent }>子组件传入给父组件</button>
            </div>
        )
    }
}