React开发实战 —— 【四】传递参数

子组件向父组件传递参数

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

子组件向父组件传递参数