跳至主要內容

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

約 3 分鐘
#React

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

從 0 開始學 React

前言

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

非受控組件

以表單為範例

  1. 環境架設起手式不變

  2. 使用類式組件

    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取值

    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()阻止表單的默認行為

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

非受控組件定義

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

受控組件

一樣的範例

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

    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. 將獲取到的值存到狀態內

    // 初始化狀態
state = {
  username: '',
  password: '',
}
// 保存帳號到狀態裡
saveUsername = (event) => {
  this.setState({ username: event.target.value })
}
// 保存密碼到狀態裡
savePassword = (event) => {
  this.setState({ password: event.target.value })
}

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

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

    受控組件

受控組件定義

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

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

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

參考資料

相關文章

分享此文章
Johnson Mao

Johnson Mao

熱衷於分享技術、AI 與開發心得的軟體工程師。

GitHub

留言