ReactJS - 非受控組件

Hello, 有志者們！今天，我們將深入ReactJS的世界，探索一個名為「非受控組件」的概念。如果你是編程新手，別擔心——我會一步步引導你，就像這些年來我對無數學生所做的那樣。所以，拿起你喜歡的飲料，讓我們一起踏上這個令人興奮的旅程吧！

ReactJS - Uncontrolled Component

非受控組件是什麼？

在我們深入細節之前，讓我們先了解在React中非受控組件是什麼。想像你正在填寫一張紙質表格——你寫下你的信息，然後完成後提交。這基本上就是React中非受控組件的工作方式！

在React中，非受控組件是一個表單元素，它內部管理自己的狀態，而不是讓React來控制它。這就像給表單元素一個自己的思想一樣！

非受控組件的表單編程

現在，讓我們捋起袖子，親自動手寫一些代碼。我們將從一個簡單的例子開始，來說明非受控組件在表單編程中是如何工作的。

基本非受控輸入

這裡是一個非受控輸入的基本示例：

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

在這個例子中，我們有一個簡單的表單，其中有一個名稱的文本輸入。注意我們沒有任何狀態或onChange處理器？這是因為輸入正在內部管理自己的狀態。

讀取輸入值

但是等等，你可能會問，“如果React不管理它，我們如何獲取輸入的值？”這個問題問得好！我們可以使用ref來直接訪問DOM節點。讓我們修改我們的例子：

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + inputRef.current.value);
};

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
}

export default SimpleForm;

在這個更新的版本中，我們使用useRef hook來創建一個指向我們輸入的引用。當表單被提交時，我們可以使用inputRef.current.value來訪問輸入的值。

創建一個簡單的表單

現在我們已經了解了基本知識，讓我們使用非受控組件創建一個更全面的表單。

多輸入表單

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Form data:', formData);
// 這裡你通常會將數據發送到伺服器
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Message:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Send Message</button>
</form>
);
}

export default ComplexForm;

在這個例子中，我們創建了一個有三個字段：名稱、電子郵件和信息的表單。每個字段都有自己的ref，這樣我們在表單提交時就可以訪問它的值。

解釋

我們為每個輸入創建refs，使用useRef。
在handleSubmit函數中，我們阻止默認的表單提交行為，並使用它們的refs從每個輸入中收集值。
然後我們將表單數據打印到控制台（在實際應用程序中，你通常會將這些數據發送到伺服器）。

非受控組件的優點和缺點

讓我們花一會兒時間討論使用非受控組件的優勢和劣勢：

優點	缺點
對基本表單來說代碼更簡單	對表單值的控制較少
對整合非React代碼或庫很有用	實現動態表單驗證更困難
對非常大型的表單來說可能有更好的性能	程式化重置表單值较困难
與文件輸入配合良好	不夠“React風格”——沒有遵循單一真相源的原則

什麼時候使用非受控組件

非受控組件在某些情況下可能很有用：

當與非React代碼或庫整合時
當處理不需要實時驗證或動態更新的簡單表單時
當使用文件輸入（它們本身就是非受控的）時

然而，對於大多數React應用程序來說，受控組件（其中React管理表單狀態）通常更優先，因為它們提供更多的控制並與React的哲學更為吻合。

結論

好了，各位！我們已經一起穿行了React中的非受控組件領域。記住，就像在選擇手動車和自動車之間一樣，選擇受控組件和非受控組件取決於你的特定需求。

當我們結束時，我想到一個學生曾經告訴我，“React就像烹飪一樣——有時候你需要精確的度量，而有時候你可以隨意估量。”非受控組件就像隨意估量——它們有它們的位置，但要明智地使用！

希望這個指南為你照亮了非受控組件的道路。持續練習，持續編程，並記住——在編程的世界裡，每一個錯誤都是通往成功的踏腳石！

祝編程愉快，未來的React大師們！

Credits: Image by storyset