前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇繼續深入介紹useEffect

1. useEffect 生命週期
2. useEffect dependency

這一篇會繼續介紹新的hook，useRef

1. 建構表單
2. 使用React Ref
3. 受控元件（Controlled Component）

建構表單

對於一個前端開發工程師來說，表單（Form）是一個相當重要的存在

因為使用者需要透過網頁的表單來去傳送資料

無論今天使用者在做註冊、登入、聯絡、查詢，大部分的動作都與表單息息相關

因此 React 也針對表單，新增了一種 useRef hook 來讓使用者可以更方便處理表單

先來快速看一個表單的 HTML 結構

<form >
    <input type="text" placeholder="username" name="username" />
    <input type="password" placeholder="password" name="password" />
    <button type="submit" />
</form>

由 form標籤 包起來，裡面有兩個 input 標籤，分別為 username＆ password 以及一個 button 標籤

使用者可以輸入使用者名稱以及密碼，透過按下按鈕提交表單

使用React Ref

當我們在使用 React 處理表單時，有很多種處理方式

而其中之一就是使用 React Ref 來去存取DOM 的資料

所謂的 Ref 其實是 Reference 的縮寫，有 Ref 以及 Ref Object

Ref 是一個物件，可以直接存取 DOM 節點的資料，專門用來處理元件的生命週期中儲存值，並且我們可以使用 useRef 快速建立一個Ref 物件

import React from 'react'
import { useRef } from 'react'


export default function Form() {
    const usernameRef = useRef();
    const passwordRef = useRef();
    const submit = (e) => {
    }
    return <>
        <form onSubmit={submit}>
            <input type="text" placeholder="username" ref={usernameRef} />
            <input type="password" placeholder="password" password={passwordRef} />
            <button>submit</button>
        </form>
    </>
}

這裡可以看到我建立了兩個 Ref 物件，分別叫做 username 以及 password

並且另外做了一個 submit 函式，用於表單提交時，直接做使用

Ref 物件的好處，則是會直接根據你在 input ref 值進行綁定，則在其他地方就可以做使用

const submit = (e) => {
    e.preventDefault();
    const username = usernameRef.current.value;
    const password = passwordRef.current.value;
    console.log(`username: ${username}`)
    console.log(`password: ${password}`)
}

只要在我需要對應的地方，使用 Ref.current.value 就可以直接獲取當前的值

如果使用者已經在表單做輸入，則當按下 submit 的那刻，就會直接去拿 Ref 物件的當前值

受控元件（Controlled Component）

上面是使用 useRef 針對DOM 去存取，通常稱為非受控元件

這邊也提供另一種 useState 的寫法，稱為受控元件（Controlled Component）

import React from 'react'
import { useState } from 'react';


export default function Form() {
    const [username, setUsername] = useState()
    const [password, setPassword] = useState()

    const submit = (e) => {
        e.preventDefault();
        console.log(`username: ${username}`)
        console.log(`password: ${password}`)
    }
    return <>
        <form onSubmit={submit}>
            <input type="text" placeholder="username" onChange={event => setUsername(event.target.value)} />
            <input type="password" placeholder="password" onChange={event => setPassword(event.target.value)} />
            <button>submit</button>
        </form>
    </>
}

這邊可以看到，上述的 useState 程式碼範例，完全沒有使用 useRef 也可以做到一樣的效果

並且，只針對元件的狀態 username 以及 password 去做修改與監聽

不過應該可以發現，只要使用者輸入任何一個字元，就會重新渲染一次元件

這對於效能是相當不好的，因此不建議這個寫法

結語

這篇講解了 useRef 與表單的關係，也提供兩種不同除理表單的版本
分別為 useRef的「非受控元件」以及useState 的「受控元件」

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～