react 父子组件,兄弟组件传值

react 父子组件传值

前言：

昨天学习了class，今天开始学组件传值了，说真的，我这都学第二遍了还是没有绕过来（笑哭 哭笑 笑出眼泪 破涕为笑 笑死 笑尿 笑cry）所以我赶紧跑过来写到这里，跟小伙伴们一起学习一下，也能更好的加深一下印象，废话不多说，下面就让我们开始吧！
【先来看一下父传子：】

父组件传值子组件

 
//父组件代码：
//创建构造函数：
constructor(props){
 super(props)
 //用this.state创建
 this.state={
   message:"父组件传过来的值"
 }
}

render(){
return(
   <div>
   //引过来的子组件
     <Son msg={this.state.message}/>
   </div>
)
}


//子组件代码
render(){
return(
   <div>
        //子组件接收的父子间传过来的值，用this.props接收
         <p>{this.props.msg}</p>
   </div> 
)
}

【再来看一下子传父：】

子组件传值父组件

//父组件代码
class Home extends Component{
   constructor(props){
   	super(props)
   	this.state={
   		title:'hello'
   	}
   }
   handleButton=(msg)=>{
   	this.setState({
   			mess:msg
   	})
   }
   render(){
   	return(
   		<div>
   			<Son value_button={this}/>		//这里给子组件定义一个属value_button性为this
   		</div>
   	) 
   }
}

//子组件代码：
   render(){
   	return(
   		<div>
   		    <button onClick={this.props.value_button.handleButton.bind(this,'子组件的数据')}>子组件给父组件传值</button>
   		</div>
   	) 
   }

子组件添加一个按钮定义一个onClick事件this.props.value_button.handleButton就可以调用父组件的方法并使用bind绑定this和传递参数.

【再来看一下兄弟传值：】

//父组件
class Father extends React.Component{

    constructor(){
        super();
        this.state = {
            message:''
        }
    }

    //用于接收Son.js组件的数据函数
    sonDatas(msg){
        this.setState({
            message:msg
        });
        console.log("在Father.js中展示Son.js生成的数据："+msg);
    }

    render(){
        return (
            <React.Fragment>
               
               <h1>在Father组件中显示：</h1>
               <Son sondata={this.sonDatas.bind(this)}></Son>
               <Son2 mess={this.state.message}></Son2>
            </React.Fragment>
        );
    }

}

//子组件
class Son extends React.Component{

    //按钮点击事件函数
    sonClick(){
        this.props.sondata('这是从Son.js中生成的数据。。。');
    }

    render(){
        return (
            <React.Fragment>
            
                <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
                    
            </React.Fragment>
        );
    }

}

//第二个子组件
class Son2 extends React.Component{

    render(){
        return (
            <React.Fragment>
            
                <h1>
                    在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：
                    {this.props.mess}
                </h1>

            </React.Fragment>
        );
    }

}

后言：

see you！！！