React入門---事件與數據的雙向綁定-9

上一節中，咱們是從父組件給子組件傳送數據，要實現事件與數據的雙向綁定，咱們來看如何從子組件向父組件傳送數據;

接觸以前，咱們看一些裏面函數綁定的知識：

例：經過點擊事件改變state的age屬性值：

export default class ComponentFooter extends React.Component{
    constructor(){
        super();
        this.state = {
            username:"azedada",
            age:24
        }
    }

    //事件函數 改變state的age
    changeAge(){
        this.setState({age:18})
    }

    render(){
        return(
                <div>
                    <h1>這裏是底部</h1>
                    <p>{this.state.username}:{this.state.age},{this.props.userId}</p> 
                    {/*這裏寫點擊事件，注意寫法是es6*/}
                    <input type="button" value="點擊改變年齡" onClick={this.changeAge.bind(this)}/>
                </div>
            )
    }
    //運行結果 24變爲18
}

接下來，咱們看如何從子組件向父組件傳送數據，

創建一個BodyIndex的子組件：bodychild，如今作的是在子組件bodychild更改的內容立馬反饋更新到BodyIndex;

例：這個子頁面是bodychild.js

import React from 'react';

export default class BodyChild extends React.Component{
    render(){
        return(
                <div>
                    {/*子頁面向父頁面傳遞參數，只能經過事件的形式，調用父頁面props傳過來的參數，這個參數是一個事件函數
                    咱們在父頁面定義這個函數，而且接收原生函數定義好的event這個參數*/}
                    <p>子頁面輸出：<input type='text' onChange={this.props.changeUsername}/></p>
                </div>
            )
    }
}

重點：子頁面向父頁面傳遞參數，只能經過事件的形式，調用父頁面props傳過來的參數，這個參數是一個事件函數；咱們在父頁面定義這個函數，而且接收原生函數定義好的event這個參數；

下面是父頁面BodyIndex.js

import React from 'react';
import ReactDOM from 'react-dom';
//將子頁面bodychild引用進來 
import BodyChild from './bodychild.js';

export default class BodyIndex extends React.Component{
    constructor(){
        super();
        this.state = {username : "azedada"} 

    }

    //定義事件函數，經過子頁面bodychild對username的改變，將顯示出來的username改變;
    changeUsername(event){
        this.setState({username:event.target.value})
    }

    render(){
        return(
                <div>
                    <h1>這裏是主體容部分</h1>
                    {/*顯示主頁面的username的值*/}
                    <p>username：{this.state.username}</p>
                    {/*下面是子頁面組件，在這裏輸入內容，將改變username的值*/}
                    <BodyChild changeUsername={this.changeUsername.bind(this)}/>
                </div>
            )
    }    
}

以上就是子組件向父組件傳送數據;

 

擴展:在子組件能夠向父組件傳送數據的時候，父組件經過點擊事件，實現將這個數據改成定值，如何操做：

添加點擊事件，進行傳參便可：

import React from 'react';
import ReactDOM from 'react-dom';
//將子頁面bodychild引用進來 
import BodyChild from './bodychild.js';

export default class BodyIndex extends React.Component{
    constructor(){
        super();
        this.state = {username : "azedada"} 

    }
    //父組件點擊事件
    recover(str){
        this.setState({username:str})
    }


    //定義子組件事件函數，經過子頁面bodychild對username的改變，將顯示出來的username改變;
    changeUsername(event){
        this.setState({username:event.target.value})
    }

    render(){
        return(
                <div>
                    <h1>這裏是主體容部分</h1>
                    {/*顯示主頁面的username的值*/}
                    <p>username：{this.state.username}</p>
                    {/*下面是子頁面組件，在這裏輸入內容，將改變username的值*/}
                    <BodyChild changeUsername={this.changeUsername.bind(this)}/>
                    {/*點擊將username變爲"azedada",在bind()進行傳參*/}
                    <input type="button" value="點擊恢復" onClick={this.recover.bind(this,"azedada")}/>
                </div>
            )
    }    
}