iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
2
Modern Web

給初入JS框架新手的React.js入門系列 第 9

【React.js入門 - 09】 用props綁定函式

props除了可以綁定資料外,也可以綁定函式。函式的綁定常被運用在不同元件間的溝通。

目前我們在javasript的程式階層如下:

index.js
    |____ App.js

在接下來這幾篇,我們將會討論到不少元件溝通的架構,為了方便說明,我們把:

  1. 「使用別人的」稱為父 (如: index.js)
  2. 「被別人使用的元件」稱為子元件 (如: App.js)

函式的綁定方法

在這邊,我們會試著在父(index.js)定義一個改變父的函式,綁定在子元件(App.js)的props,並透過子元件觸發

  1. 首先,我們在index.js創造一塊等等用來改變的div:

    ReactDOM.render(
        <div>
            <App name="我的名字"/>
            <div id="show-area"></div> /*這裡是等等用來改變的地方*/
        </div>,
        document.getElementById('root')
    );
    
  2. 接著,在index.js定義要使用的函式:

    const printMessage=()=>{
        document.getElementById('show-area').innerHTML="我被按到了";
    }
    

    這個函式被觸發時,會在剛剛render函式新增的div印出「我被按到了」。

  3. 綁定printMessage函式到App上:

    ReactDOM.render(
        <div>
            <App name="我的名字" handleClick={printMessage}/> /*綁定函式*/
            <div id="show-area"></div> 
        </div>,
        document.getElementById('root')
    );
    

    要注意的是我們這邊綁定的名稱是handleClick,等等在子元素使用時要用綁定的名稱,而不是我們在index.js的原函式名稱。
    做到這一步,我們的index.js應該會長這樣:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    const printMessage=()=>{
        document.getElementById('show-area').innerHTML="我被按到了";
    }
    
    ReactDOM.render(
        <div>
            <App name="我的名字" handleClick={printMessage}/>
            <div id="show-area"></div>
        </div>,
        document.getElementById('root')
    );
    
  4. 最後在App.js中,把剛剛的函式綁定至button的onClick。使用方式和props的資料一樣:

    function App(props){
      return(
        <button onClick={props.handleClick}>{props.name}</button>
      );
    }
    

到這邊,我們就完成了父對子的函式綁定。當我們執行後會看到

  1. 按下前:
  2. 按下後:

預告第21篇: 在子元件利用父元件的函式來改變props資料

前面有提到,props不能被子元件直接更改,但我們有時候還是會希望在子元件自己這更改props資料。確切的示範因為還要搭配還沒教的state,所以會等後面才會來詳細說。不過在這邊先簡單提一下:

  1. 在父元件用state來綁定props資料、定義一個修改前面綁定的state的函式綁定在props上
  2. 在子元件呼叫剛剛綁定在props上的父元件函式
  3. 「父元件函式」就會修改前面綁定的state
  4. props就會被改變

因為鐵人賽是一天發一篇的,雖然我不知道是不是真的有人跟著我的文章學,不過還是先提供給有急迫需要的人去搭配版上其他大神的文章:)


上一篇
【React.js入門 - 08】 用props綁定資料
下一篇
【React.js入門 - 10】 夾在中間的props: children
系列文
給初入JS框架新手的React.js入門31

尚未有邦友留言

立即登入留言