您如何在React中創建受控組件？

您如何在React中創建受控組件？

在React中創建受控組件涉及通過組件狀態管理形式元素的狀態（例如輸入字段，下拉字段和文本區域），而不是讓DOM管理它。這是有關如何創建受控組件的分步指南：

1. 設置狀態：首先，您需要在React組件中設置狀態以保持表單元素的值。可以使用用於功能組件的useState鉤子或類組件的this.state對象來完成此操作。

    <code class="javascript">const [inputValue, setInputValue] = useState('');</code>

   登入後複製

2. 將狀態綁定到值：接下來，您將狀態綁定到表單元素的value屬性。對於輸入字段，這可能看起來像：

    <code class="jsx"><input type="text" value="{inputValue}" onchange="{handleChange}"></code>

   登入後複製

3. 處理更改：您需要創建一個函數來處理對錶單元素的更改。只要用戶與表單元素進行交互，此功能就會更新狀態。

    <code class="javascript">const handleChange = (event) => { setInputValue(event.target.value); };</code>

   登入後複製

通過遵循以下步驟，您可以有效地創建一個受控組件，其中React負責該表格的狀態，並且對錶單元素的任何更新都必須通過React的狀態管理進行。

在React中使用受控組件有什麼好處？

React中的受控組件提供了一些增強開發和用戶體驗的好處：

1. 可預測性和控制性：由於組件的狀態管理表單元素，因此您可以完全控制數據發生的內容以及如何顯示。這使您的應用程序的行為可預測且更容易調試。
2. 真理的單一來源：使用受控組件，形式元素的狀態存儲在一個位置（組件的狀態）中，該狀態充當真理的單一來源。這簡化了數據管理並減少了數據不一致的機會。
3. 可重複性和可伸縮性：受控組件使您可以更輕鬆地在應用程序的不同部分重複使用表單邏輯。您可以一次編寫驗證，轉換和提交邏輯，並將其應用於多種形式。
4. 更輕鬆的表單驗證：管理形式元素的狀態使實施實時驗證並為用戶提供立即反饋以增強用戶體驗是直接的。
5. 更輕鬆的測試：由於該狀態是通過編程管理的，因此為表格編寫單元測試更容易，以確保它們在各種情況下的表現如預期。

如何使用React中的受控組件處理形式驗證？

用反應中的受控組件處理形式驗證涉及使用狀態跟踪形式元素的有效性。您可以做到這一點：

1. 驗證邏輯：編寫功能，以檢查表單輸入的有效性。這些可以簡單地檢查所需字段，也可以是更複雜的驗證，例如電子郵件格式，密碼強度等。

    <code class="javascript">const validateEmail = (email) => { const re = /^[a-zA-Z0-9._-] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$/; return re.test(String(email).toLowerCase()); };</code>

   登入後複製

2. 驗證狀態：添加狀態變量以跟踪字段是否有效並可能保存錯誤消息。

    <code class="javascript">const [email, setEmail] = useState(''); const [emailError, setEmailError] = useState('');</code>

   登入後複製

3. 更改驗證：在您的handleChange功能中，調用驗證功能並相應地更新驗證狀態。

    <code class="javascript">const handleEmailChange = (event) => { const newEmail = event.target.value; setEmail(newEmail); if (!validateEmail(newEmail)) { setEmailError('Please enter a valid email address'); } else { setEmailError(''); } };</code>

   登入後複製

4. 顯示驗證反饋：使用驗證狀態實時向用戶顯示錯誤消息或成功指標。

    <code class="jsx"><input type="email" value="{email}" onchange="{handleEmailChange}"> {emailError && <div style="{{color:">{emailError}</div>}</code>

   登入後複製

5. 表格提交：提交表單後，您可以檢查驗證狀態以決定是否進行提交或顯示錯誤。

    <code class="javascript">const handleSubmit = (event) => { event.preventDefault(); if (!emailError) { // Proceed with form submission } else { // Handle form submission errors } };</code>

   登入後複製

這種方法使您可以創建一種無縫的用戶體驗，其中驗證實時發生，從而幫助用戶糾正錯誤。

React中受控組件和不受控制的組件有什麼區別？

React中受控組件和不受控制的組件之間的主要區別在於它們如何管理和處理形式數據：

1. 國家管理：

   • 受控組件：這些組件具有由父組件管理的狀態和行為。父組件使用道具將當前值和事件處理程序傳遞給子組件，從而有效地控制輸入的值。
   • 不受控制的組件：這些組件在內部管理自己的國家。他們使用參考文獻直接從DOM訪問表單元素的當前值。

2. 數據流：

   • 受控組件：數據從組件的狀態流到DOM。對輸入值的任何更改都必須通過更新狀態的事件處理程序進行。
   • 不受控制的組件：數據在需要時直接從DOM讀取數據，繞過組件的狀態。

3. 可預測性和控制：

   • 受控組件：提供更多的控制和可預測性，因為該狀態是通過編程管理的。這是您需要實時驗證，轉換或處理數據的複雜形式的理想選擇。
   • 不受控制的組件：更簡單地設置，並且對於僅訪問一次數據（例如表單提交）的簡單表單而言可能是優選的。但是，他們對錶格的行為的控制權較少。

4. 示例用法：

   • 受控組件：需要實時驗證，複雜數據操作或需要跨多個組件重複使用表單邏輯的形式的理想選擇。
   • 不受控制的組件：對於不需要主動管理每個字段狀態的快速和簡單表單，例如簡單的搜索輸入。

總而言之，受控組件提供了更多的控制，並且適合複雜形式的交互，而不受控制的組件更簡單，更適合基本用例。

以上是您如何在React中創建受控組件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！