reactJS -- 5 Props 属性

一.逻辑

1.index.js 

index.js 调用 bodyIndex.js

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';  // （./）当前目录下
import ComponentFooter from './components/footer';
import BodyIndex from './components/bodyIndex'
class Index extends React.Component {
	componentWillMount(){
    //定义你的逻辑
    console.log("Index - componentWillMount")

  }
  componentDidMount(){
    console.log("Index - componentDidMount");
  }
	render() {
		//能够将组件定义为参数
		var component = <ComponentHeader/>
		return (
			<div>
				{component}  {/*利用参数形式调用*/}
				<BodyIndex userId = {123456} userName = {"propsName"} />
				<ComponentFooter/>
			</div>
		);
	}
}
ReactDOM.render(
	<Index/>, document.getElementById('example')
);


/*
1. index 中生命周期函数最后调用，在各个组件调用完毕后
	componentWillMount
	componentDidMount
*/

2.bodyIndex.js

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class BodyIndex extends React.Component{
  constructor(){   //类的构造函数
    super(); // 调用基类的全部的初始化方法
    this.state = {
      userName :"parray",
      age:10
    }; //初始化赋值
  }
  render(){   //解析类的输出

    setTimeout(()=>{
      //更改state的语句
      this.setState({
        userName : "userName changed",
        age : 20
      })

    },4000);  //4s  刷新
    return (
      <div>
        <h2>页面主体内容</h2>
        <p>{this.state.userName} {this.state.age} {this.props.userId} { this.props.userName}</p>
      </div>
    )
  }
}

二.传值

在index.js中给 bodyIndex 传值

{this.props.userId} 

三.Object.assign()

Object.assign() 方法用于将全部可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

1.语法

Object.assign(target, ...sources)

A.参数:

 target目标对象

sources (多个)源对象。

返回值 目标对象。

 

2.事例

复制一个 object

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

四.子页面向父页面传递值

在子组件 bodychild中修改数据，父组件 bodyIndex马上刷新。只能经过事件形式。event 原生参数

1.修改 state

//建立事件
  changerUserInfo(age){
    this.setState({age : age});
  };

2.this的绑定

传入了一个参数 99

<input type= "button" value="submit" onClick={this.changerUserInfo.bind(this,99)} />
<BodyChild handleChildValueChange = {this.handleChildValueChange.bind(this)}/>

3. bodychild

1）在子页面输入，父页面会刷新

onChange={this.props.handleChildValueChange}

当子页面内容变动时当即调用，父页面传过来的 handleChildValueChange 函数

import React from 'React';

export default class BodyChild extends React.Component{

  render(){
    return(
      <div>
      {/* 当子页面input onchange 发生改变, 调用传入的handleChildValueChange 函数*/}
          <p>子页面输入: <input type= "text" onChange={this.props.handleChildValueChange}/> </p>
      </div>
    )
  }
}

/* 在父页面中 声明事件
//建立 input 改变事件
  handleChildValueChange(event){
    this.setState({age : event.target.value})
  };

  经过 ：event.target.value 获取input的值
*/

 

 

4.bodyIndex

1）建立函数 ：handleChildValueChange

//建立 input 改变事件
  handleChildValueChange(event){ // event 原生参数。
    this.setState({age : event.target.value}) //取出子页面当前操做空间的值
  };

//event.target 获取子页面控件

3） event.target

console.log(event.target); ==》<input type = "text">

在子页面调用父页面的 Props

2）代码

import React from 'react';
import ReactDOM from 'react-dom';
//引入body子页面
import BodyChild from './BodyChild'
//export 暴露
export default class BodyIndex extends React.Component{
  constructor(){   //类的构造函数
    super(); // 调用基类的全部的初始化方法
    this.state = {
      userName :"parray",
      age:10
    }; //初始化赋值
  }

  //建立事件
  changerUserInfo(age){
    this.setState({age : age});
  };

//建立 input 改变事件
  handleChildValueChange(event){
    this.setState({age : event.target.value})
  };
  render(){   //解析类的输出

    return (
      <div>
        <h2>页面主体内容</h2>
        <p>{this.props.userId} { this.props.userName}</p>
        <p>age:{this.state.age}</p>
        <input type= "button" value="submit" onClick={this.changerUserInfo.bind(this,99)} />
        <BodyChild handleChildValueChange = {this.handleChildValueChange.bind(this)}/>
      </div>
    )
  }
}

/* ES6语法关于this绑定的问题
1. <input type= "button" value="submit" onClick={this.changerUserInfo.bind(this)} />
bind(this)
2.  <BodyChild/> 完成子页面输入反馈到age上面
3. 定义函数 handleChildValueChange
4. 将函数传入子页面 利用属性 handleChildValueChange
5. 有this 如何调用两个参数
<input type= "button" value="submit" onClick={this.changerUserInfo.bind(this,99)}
一点击就能够将 99传入age
*/