React 從入門到進階之路（七）

之前的文章我們介紹了 React 表單詳解 約束性和非約束性元件 input text checkbox radio  select  textarea  以及獲取表單的內容。接下來我們將介紹 React中的元件、父子元件、React props父元件給子元件傳值、子元件給父元件傳值、父元件中通過refs獲取子元件屬性和方法。

 之前我們已經根據 create-react-app 模組建立了一個 React 專案，並定義 App.js 為根元件，即父元件，Home.js 為子元件。我們看一下兩個元件的程式碼：

App.js

import React, {Component} from 'react';
import Home from './components/Home';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "I am father"
        }
    }

    fatherFunction = () => {
        console.log("I am fatherFunction")
    }

    fatherSelf = () => {
        console.log("I am fatherSelf")
    }

    getChildData = (name) => {
        console.log(name)
    }

    render() {
        return (
            <div className="App">
                <Home
                    title={this.state.title}
                    fatherFunction={this.fatherFunction}
                    father={this}
                />
            </div>
        );
    }
}

export default App;

Home.js

import React, {Component} from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "zhangsan",
        }
    }

    render() {
        return (
            <div>
                <p>Hello {this.state.name}</p>

                {/*接收父元件的傳值*/}
                {this.props.title}

                <br/><br/>

                {/*接收父元件的 fatherFunction 方法*/}
                <button onClick={this.props.fatherFunction}>呼叫父元件的fatherFunction方法</button>

                <br/><br/>

                {/*呼叫父元件的fatherSelf方法*/}
                <button onClick={this.props.father.fatherSelf}>呼叫父元件的fatherSelf方法</button>

                <br/><br/>

                {/*子元件給父元件傳值*/}
                <button onClick={this.props.father.getChildData.bind(this, this.state.name)}>子元件給父元件傳值</button>
            </div>
        );
    }
}

export default Home;

我們在 App.js 的 render 中 插入 <Home /> 標籤，即代表將子元件 Home 掛載到了父元件 App 中。

在父元件 App 標籤 <Home /> 標籤中傳給子元件 Home：

值：

　　title={this.state.title}，

方法：

　　fatherFunction={this.fatherFunction}，

整個父元件 App：

father={this}

 

在子元件 Home 中：

　　通過 {this.props.title} 來獲取父元件 App 的傳值。

　　在子元件 Home 的 button 的 onClick 事件中繫結 {this.props.fatherFunction} 來獲取父元件 App 傳過來的方法。

　　在子元件 Home 的 button 的 onClick 事件中繫結 {this.props.father.fatherSelf} 來獲取父元件 App 傳過來整個 App 元件中的 fatherSelf 方法，在這裡我們可以看出我們並沒有向子元件中傳遞 fatherSelf 方法，但是我們將整個父元件傳遞給了子元件，所以子元件中能夠呼叫父元件的所有方法和傳值。

　　由於我們將整個父元件都傳遞給了子元件，在子元件中我們可以呼叫父元件的方法並將子元件的值傳給父元件來完成父子元件間的通訊。我們在子元件中通過 button 的 onClick 事件呼叫父元件的 getChildData 方法將 name 值傳給父元件。onClick = {this.props.father.getChildData.bind(this, this.state.name)}。然後我們在父元件 App 中就可以獲取到子元件 Home 傳遞過來的 name 值了。

執行結果如下：

 

以上就是父子元件間的通訊，當然子元件向父元件傳值和方法還可以通過 ref 和 refs 來實現。如下：

App.js

import React, {Component} from 'react';
import Home from './components/Home';

class App extends Component {
    getChildData = () => {
        console.log(this.refs.child.state.name);
        this.refs.child.childFunction();
    }

    render() {
        return (
            <div className="App">
                <Home ref="child"/>
                <button onClick={this.getChildData}>獲取子元件的傳值和方法</button>
            </div>
        );
    }
}

export default App;

Home.js

import React, {Component} from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "zhangsan",
        }
    }

    childFunction = () => {
        console.log("I am child")
    }

    render() {
        return (
            <div>
                <p>Hello {this.state.name}</p>
            </div>
        );
    }
}

export default Home;

我們在父元件 App 中掛載子元件 Home，並在標籤<Home /> 中插入 ref="child"，意思是將子元件 Home 通過 ref 傳過來。然後在父元件 App 中的 button 的 onClick 事件中定義 getChildData 方法，在該方法裡可以通過 this.refs.child.state.name 來獲取子元件 Home 的 name 值，通過 this.refs.child.childFunction() 來呼叫子元件 Home 的 childFunction 方法。

最後執行結果如下：