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>
)
}
}