Input Terkawal & Tidak Terkawal

Input Terkawal dan Tidak Terkawal ialah istilah yang digunakan dalam konteks input borang dalam pembangunan web, terutamanya dalam rangka kerja seperti React.

Input Terkawal

Dalam input terkawal, nilai medan input dikawal oleh keadaan komponen. Ini bermakna keadaan komponen memegang nilai semasa input, dan apabila nilai input berubah (mis., melalui penaipan pengguna), ia mengemas kini keadaan dan nilai input mencerminkan keadaan. Ini biasanya dilakukan dengan menetapkan prop nilai input kepada nilai keadaan dan menyediakan pengendali onChange untuk mengemas kini keadaan apabila input berubah. Input terkawal biasanya digunakan dalam aplikasi React untuk pengendalian borang.

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}
    />
  );
}

Input Tidak Terkawal

Dalam input tidak terkawal, nilai medan input tidak dikawal secara langsung oleh keadaan React. Sebaliknya, elemen input menguruskan keadaannya sendiri secara dalaman. Ini bermakna React tidak mempunyai kawalan langsung ke atas nilai input dan untuk mendapatkan nilai, anda biasanya perlu mengakses DOM secara langsung (cth., menggunakan rujukan) dan bukannya menanyakan keadaan React. Input tidak terkawal adalah kurang biasa dalam React tetapi boleh berguna dalam situasi tertentu, seperti untuk mengendalikan gelagat bentuk yang kompleks atau menyepadukan dengan perpustakaan bukan React yang mengurus keadaan input secara berbeza.

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>
  );
}

Ringkasnya, input terkawal mengikat nilai input terus kepada keadaan React, memberikan lebih kawalan dan penyegerakan antara UI dan keadaan. Input tidak terkawal diurus secara dalaman oleh DOM atau perpustakaan lain, dengan React mengakses nilainya secara tidak langsung apabila diperlukan.

Atas ialah kandungan terperinci Input Terkawal & Tidak Terkawal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!