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

反應受控/不受控組件

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

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]刪除
最新教學 更多>

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

Copyright© 2022 湘ICP备2022001581号-3