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
*/