React - 受控組件 與 非受控組件

React - 受控組件 與 非受控組件

從 0 開始學 React

前言

介紹受控組件與非受控組件的差異～

非受控組件

以表單為範例

  1. 環境架設起手式不變

  2. 使用類式組件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    render(){
      return(
        <form action="https://www.google.com.tw/">
          <label for="username">帳號：</label>
          <input type="text" id="username" name="username"/><br/>
          <label for="password">密碼：</label>
          <input type="password" id="password" name="password"/><br/>
          <button>登入</button>
        </form>
      )
    }

    畫面呈現

  3. 測試輸入帳號123密碼456，確實發送數值
    url

  4. 幫form綁函式，並為input綁定ref，需注意ref獲取的是節點，要用value取值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    handleSubmit = () => {
        const { username, password } = this;
        // ref 獲取的是節點，要用 value 取值
        alert(`你的帳號是 ${username.value} 密碼是 ${password.value}`);
    }

    render(){
        return(
          <form action="https://www.google.com.tw/" onSubmit={ this.handleSubmit }>
            <label for="username">帳號：</label>
            <input ref={ c => this.username = c } type="text" id="username" name="username"/><br/>
            <label for="password">密碼：</label>
            <input ref={ c => this.password = c } type="password" id="password" name="password"/><br/>
            <button>登入</button>
          </form>
        )
    }

    資料成功獲取，但網頁發生跳轉

  5. 添加event.preventDefault()阻止表單的默認行為

    1
    2
    3
    4
    5
    handleSubmit = (event) => {
        event.preventDefault(); // 阻止默認行為
        const { username, password } = this;
        alert(`你的帳號是 ${username.value} 密碼是 ${password.value}`);
    }

非受控組件定義

  • 所有輸入類的DOM，只要是依靠ref現取現用，就是非受控的組件

受控組件

一樣的範例

  1. 捨棄ref，改成用onChange取值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    render(){
        return(
          <form action="https://www.google.com.tw/" onSubmit={ this.handleSubmit }>
            <label for="username">帳號：</label>
            <input onChange={this.saveUsername} type="text" id="username" name="username"/><br/>
            <label for="password">密碼：</label>
            <input onChange={this.savePassword} type="password" id="password" name="password"/><br/>
            <button>登入</button>
          </form>
        )
    }

  2. 將獲取到的值存到狀態內

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 初始化狀態
    state = {
        username: '',
        password: '',
    }
    // 保存帳號到狀態裡
    saveUsername = (event) => {
        this.setState({username: event.target.value})
    }
    // 保存密碼到狀態裡
    savePassword = (event) => {
        this.setState({password: event.target.value})
    }

  3. 回調函數改成從狀態裡取值

    1
    2
    3
    4
    5
    6
    // 表單提交的回調函數
    handleSubmit = (event) => {
      event.preventDefault();
      const { username, password } = this.state; // 從狀態取值
      alert(`你的帳號是 ${username} 密碼是 ${password}`);
    }

    受控組件

受控組件定義

  • 所有輸入類的DOM，隨著資料的輸入，把資料傳入狀態內，等需要使用時，再從狀態取出來，就是受控的組件
  • 這跟 Vue 裡面的雙向綁定效果一樣

受控組件 與 非受控組件 的差異

  • 非受控組件依靠ref取值，有多少個輸入框，就有多少個ref :-1: (官方不建議過度使用Refs)
  • 受控組件依靠狀態來存取值，有需要使用時再調出來 :+1:。

參考資料