」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 反應受控/不受控組件

反應受控/不受控組件

發佈於2024-11-09
瀏覽:569

React Controlled/Uncontrolled Components

在 React 中,處理表單輸入主要有兩種方法:

  • 受控組件
  • 不受控制的組件

受控組件提供更多控制和驗證,而不受控組件更簡單,對於間歇性值存取的基本形式有用。

受控組件

這些是表單輸入,其值由 React State 控制。每當輸入的值發生變化時,狀態變數就會更新,並且輸入的值是透過 value 屬性明確設定的。

onChange 事件處理程序用於更新狀態。

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          
     );
}

在上面的範例中,name狀態變數控制輸入欄位的值。每當輸入值發生變化時,handleChange函數就會更新名稱狀態,並且輸入值透過 value 屬性設定為名稱狀態變數的目前值。

不受控制的組件

不受控制的元件是在內部管理其狀態的表單輸入,而不是由 React State 控制。您可以在提交表單後或在需要時使用 ref 存取輸入的目前值。

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          
); }

在上面的範例中,inputRef 用於為 input 欄位建立 refhandleSubmit 函數使用 inputRef.current.value 存取輸入的目前值。可以實現表單提交邏輯以根據需要利用輸入值。

版本聲明 本文轉載於:https://dev.to/mursalfk/react-controlleduncontrolled-components-55nk?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 在Java中如何為PNG文件添加坐標軸和標籤?
    在Java中如何為PNG文件添加坐標軸和標籤?
    如何用java 在現有png映像中添加軸和標籤的axes和labels如何註釋png文件可能具有挑戰性。與其嘗試可能導致錯誤和不一致的修改,不如建議在圖表創建過程中集成註釋。 使用JFReechArt import java.awt.color; 導入java.awt.eventqueue; 導...
    程式設計 發佈於2025-04-30
  • 使用JavaScript獲取HTML元素的計算樣式值方法
    使用JavaScript獲取HTML元素的計算樣式值方法
    與JavaScript 解決方案:以獲取計算樣式值,有必要訪問元素的計算樣式。有兩種方法,具有大多數瀏覽器支持的標準DOM 2方法,以及IE特定元素.currentStyle屬性。 標準方法(W3C): var value,defaultView =(el.ownerdocument || d...
    程式設計 發佈於2025-04-30
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-04-30
  • 為什麼PYTZ最初顯示出意外的時區偏移?
    為什麼PYTZ最初顯示出意外的時區偏移?
    與pytz 最初從pytz獲得特定的偏移。例如,亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移: 差異源利用本地化將時區分配給日期,使用了適當的時區名稱和偏移量。但是,直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone(&#...
    程式設計 發佈於2025-04-30
  • 如何有效地選擇熊貓數據框中的列?
    如何有效地選擇熊貓數據框中的列?
    在處理數據操作任務時,在Pandas DataFrames 中選擇列時,選擇特定列的必要條件是必要的。在Pandas中,選擇列的各種選項。 選項1:使用列名 如果已知列索引,請使用ILOC函數選擇它們。請注意,python索引基於零。 df1 = df.iloc [:,0:2]#使用索引0和1 ...
    程式設計 發佈於2025-04-30
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-04-30
  • Python中生成浮點數範圍的技巧
    Python中生成浮點數範圍的技巧
    在python python range(&&&&&&&&&&&&&&&&&& equivalents()函數在整數上運行,但是floats有可比的功能嗎?默認情況下,range()即使開始和停止參數為floats。考慮以下示例:The output excludes the starting ...
    程式設計 發佈於2025-04-30
  • Go web應用何時關閉數據庫連接?
    Go web應用何時關閉數據庫連接?
    在GO Web Applications中管理數據庫連接很少,考慮以下簡化的web應用程序代碼:出現的問題:何時應在DB連接上調用Close()方法? ,該特定方案將自動關閉程序時,該程序將在EXITS EXITS EXITS出現時自動關閉。但是,其他考慮因素可能保證手動處理。 選項1:隱式關閉終...
    程式設計 發佈於2025-04-30
  • Python獲取任意月份最後一天的技巧
    Python獲取任意月份最後一天的技巧
    在Python 獲得一個月的最後一天,只需訪問tuple返回的第二個exterial.monthrange。月)[1] 以下是一些示例來說明其用法:日曆模塊在第二個示例中正確處理leap年。它還支持過去和未來的日期,以及前傾斜的日曆。但是,對於3.12之前的Python版本,工作日在互動pytho...
    程式設計 發佈於2025-04-30
  • 如何從PHP中的Unicode字符串中有效地產生對URL友好的sl。
    如何從PHP中的Unicode字符串中有效地產生對URL友好的sl。
    為有效的slug生成首先,該函數用指定的分隔符替換所有非字母或數字字符。此步驟可確保slug遵守URL慣例。隨後,它採用ICONV函數將文本簡化為us-ascii兼容格式,從而允許更廣泛的字符集合兼容性。 接下來,該函數使用正則表達式刪除了不需要的字符,例如特殊字符和空格。此步驟可確保slug僅包...
    程式設計 發佈於2025-04-30
  • 大批
    大批
    [2 數組是對象,因此它們在JS中也具有方法。 切片(開始):在新數組中提取部分數組,而無需突變原始數組。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    程式設計 發佈於2025-04-30
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-04-30
  • 如何在其容器中為DIV創建平滑的左右CSS動畫?
    如何在其容器中為DIV創建平滑的左右CSS動畫?
    通用CSS動畫,用於左右運動 ,我們將探索創建一個通用的CSS動畫,以向左和右移動DIV,從而到達其容器的邊緣。該動畫可以應用於具有絕對定位的任何div,無論其未知長度如何。 問題:使用左直接導致瞬時消失 更加流暢的解決方案:混合轉換和左 [並實現平穩的,線性的運動,我們介紹了線性的轉換。...
    程式設計 發佈於2025-04-30
  • 如何使用Depimal.parse()中的指數表示法中的數字?
    如何使用Depimal.parse()中的指數表示法中的數字?
    在嘗試使用Decimal.parse(“ 1.2345e-02”中的指數符號表示法表示的字符串時,您可能會遇到錯誤。這是因為默認解析方法無法識別指數符號。 成功解析這樣的字符串,您需要明確指定它代表浮點數。您可以使用numbersTyles.Float樣式進行此操作,如下所示:[&& && && ...
    程式設計 發佈於2025-04-30
  • 在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在JTable中維護jtable單元格渲染後,在JTable中,在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是,至關重要的是要確保即使在編輯操作後也保留所需的格式。 在設置用於格式化“價格”列的“價格”列,用戶遇到的數字格式丟失的“價格”列的“價格”之後,問題在設置自定義單元...
    程式設計 發佈於2025-04-30

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3