React 中的受控元件與非受控元件

受控元件：透過 state 或 props 控製表單元素狀態的 React 元件，即每個狀態突變都會有一個關聯的處理函數。

特點

• 由state - 元素值控制的值綁定到狀態變數
• 需要事件處理程序 - 要更新狀態，您需要事件處理程序
• 可預測 - 由於組件狀態代表輸入值，因此組件是可預測的且易於調試
• React 處理輸入數據，不依賴 DOM 來追蹤目前輸入值

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <input
        type="text"
        value={value}
        onChange={handleChange}
      />
    </form>
  );
}

不受控制的元件：React 元件，其中 DOM 本身處理表單元素的狀態。 React 透過 ref 存取輸入值，ref 在內部儲存自己的狀態，並且您可以在需要時使用 ref 查詢 DOM 以查找其當前值。這有點像傳統的 HTML。

特點

• 由 DOM 控制的值 - 輸入欄位的值未綁定到狀態變數。
• 使用 Ref 存取值或在需要時取得輸入元素的值
• 如果您不需要即時控制輸入，它們的設定會更簡單。
• 適合不需要react state來控制輸入的場景。

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

這是受控組件和非受控組件之間的比較表：

何時使用
受控 - 用於即時驗證、輸入格式或即時回饋。
不受控制 - 用於簡單的用例，例如檔案上傳預先填寫的表單值不頻繁或需要延遲到表單提交。

以上是React 中的受控元件與非受控元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！