子组件向父组件传递参数
一、state属性
state对于模块而言属于自身的属性,做作用与当前的类, 不污染其他模块
1、初始化
在react中,要在类的顶部初始化
state
的值,初始化要放在构造函数constructor
里,以字典的形式初始化赋值。在constructor函数里,必须要加上
super()
。
super表示的是当前类的父类,super()只是进行初始化的,继承父类的一些属性 。
2、调用state
- 在组件中调用state的时候 只需要用
{this.state.keyName}
的格式就可以。
3、修改state
- state不能直接更改值,必须使用
this.setState()
。
constructor () {
super()
this.state = { name: "lauder"}
}
class a extends component{
render(){
setTimeout(()=>{ //计时函数,4秒之后将userName改为anguo
this.setState({userName:"anguo"}) //修改sate的值
},4000);
return(
{this.state.name}
)}
}
二、Props 属性
props对于模块而言,属于外来属性, 同样也不会污染其他模块
1、传递参数
在父组件,直接在子组件内添加属性进行传参<classA name={"lauder"}>
;
2、模块中接收参数
在子组件接收父组件传递的参数,{this.props.name}
三、绑定事件
利用监听事件onClick触发函数,来改变state参数。
注意:bind()是ES6的方法,用来确保 this
的指向是正确的,此处,因为this是react中的组件实例,所以要在这里重新指向一下。
class PCBody extends Component{
changeUserInfo(){
this.setState({userName:"MAMA"});
}
render(){
return(
<div>
<p>age: {this.state.userName}</p>
<input type="button" value="提交"
onClick={this.changeUserInfo.bind(this)}/>
</div>
) }