React表單合理取值方式

React表單完全使用受控組件，即使用value和onChange來控制input狀態

<input value={email} onChange={(e) => setEmail(e.target.value)} />

在input輸入字符時候，會頻繁觸發表單重新渲染，因爲state改變，react進行了re-render

要避免此種情況，可以使用非受控組件的表單，在組件之間沒有實時聯動的情況下，非常好用

 <form onSubmit={handleSubmit}>
    <div className="input-field">
        <label htmlFor="email1">Email</label>
        <input id="email1" type="email" name="email" autoComplete="off" />
    </div>
    <div className="input-field">
        <label htmlFor="password1">Password</label>
        <input id="password1" type="password" name="password" />
    </div>
    <button type="submit">Submit</button>
 </form>

function handleSubmit(e) {
    e.preventDefault();

    // e.currentTarget 直接初始化表單
    const form = new FormData(e.currentTarget)

    // form.get 直接獲取表單值
    const email = form.get("email");
    const password = form.get("password");
    const gender = form.get("gender");

    //form.set修改對應值
    form.set(password, hash(password)),

    //form.has判斷是否有值
    if(formData.has('password')){
        // form.append 添加額外值
        form.append('key', key);
    }

    //form.delete刪除指定值
    form.delete('gender', gender),

    // entries遍歷表單值
    const body = {};
    for (const [key, value] of form.entries()) {
        body[key] = value;
    }
}

使用FormData的優勢

表單輸入值會自動捕獲，無需爲每個輸入字段維護狀態變量。
使用 FormData 時，API請求體可以很容易地構建，而使用 useState 時，我們需要組裝提交的數據。
當表單增長時，它消除了引入新的狀態變量的需求。
處理多個表單時，您可能會發現在組件之間重複使用類似的狀態變量，而 FormData 只需幾行代碼就可以輕鬆重用。
FormData 支持的一項功能是它會自動處理動態字段。即，如果您的表單具有動態生成的字段（根據用戶輸入添加/刪除字段），使用 useState 管理它們的狀態需要額外處理，而 FormData 會自動處理這些。

組件需要實時聯動，則需要setState刷新視圖，需要使用受控組件

待實踐後，繼續補充

 

參考：在 React 表單開發時，有時沒有必要使用State 數據狀態