React组件传值

React组件之间传值与Vuel类似，分为父-子传值和子-父传值。

一、父子传值

通过组件的props属性，来达到父组件传值给子组件的目的，

二、子父传值

在父组件中定义方法，并通过props传递给子组件，子组件通过this.props.funName(data)激活父组件方法，传递“data”值。注意：在父组件通过Props传递自定义方法时一定要用bind(this);绑定this。

父组件：

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state={
            parentText:"好好学习，天天向上",
            sonText:""
        }
    }

    show(){
        return this.props.match.params.id;
    }
  
    send=()=>{
        console.log(this);
       this.props.history.push('/Login');
    }
    fun(text){
        this.setState({
            sonText:text
        })
    }

        render(){

            return(

                <div className="home">
                    <h1>我的home页面</h1>
                    <h2>{this.show()}</h2>
                    <div onClick={this.send}>发送</div>
                    <HomeSon parentText={this.state.parentText} onSubmit={this.fun.bind(this)}></HomeSon>//关键是这一句，把父组件的数据或者方法通过Props属性传递给子组件
                    <p>来自子组件的文字：{this.state.sonText}</p>
                </div>
            )
        }



}

 子组件：

class HomeSon extends React.Component{

    constructor(props){
        super(props)
        this.state={
            textSon:"要零钱"
        }
    };
    clickHandler=()=>{
        this.props.onSubmit(this.state.textSon);//激活Props中父组件传过来的事件，并通过参数的方式把子组件需要传递的数据发送给父组件。
        console.log(this.props);
    }
    render(){

        return(
            
            <div>
                <p>我是son组件,爸爸传来的文字:{this.props.parentText}</p>//通过this.props.propsName来获取父组件传递的值
                <button onClick={this.clickHandler}>发送</button>

            </div>
        )
    }

}