受控和非受控輸入

受控輸入和非受控輸入是 Web 開發中表單輸入上下文中使用的術語，尤其是在 React 這樣的框架中。

受控輸入

在受控輸入中，輸入欄位的值由組件的狀態控制。這表示組件的狀態保存輸入的當前值，並且當輸入值發生變化（例如，透過使用者鍵入）時，它會更新狀態，並且輸入值反映狀態。這通常是透過將輸入的 value 屬性設為狀態值並提供 onChange 處理程序以在輸入變更時更新狀態來完成的。受控輸入通常在 React 應用程式中用於表單處理。

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

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

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

不受控制的輸入

在不受控輸入中，輸入欄位的值不直接由 React 狀態控制。相反，輸入元素在內部管理自己的狀態。這表示 React 無法直接控制輸入值，並且要取得該值，您通常必須直接存取 DOM（例如，使用 refs）而不是查詢 React 狀態。不受控制的輸入在 React 中不太常見，但在某些情況下可能很有用，例如處理複雜的表單行為或與以不同方式管理輸入狀態的非 React 庫整合。

import React, { useRef } from 'react';

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

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

總之，受控輸入將輸入值直接與 React 狀態連結起來，從而在 UI 和狀態之間提供更多控制和同步。不受控制的輸入由 DOM 或其他庫在內部管理，React 在需要時間接存取它們的值。

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