Komponen Terkawal/Tidak Terkawal Tindak Balas

Dalam React, terdapat dua pendekatan utama untuk mengendalikan input borang:

• Komponen Terkawal
• Komponen Tidak Terkawal

Komponen Terkawal menyediakan lebih banyak kawalan dan pengesahan, manakala komponen tidak terkawal adalah lebih mudah dan berguna untuk bentuk asas akses nilai terputus-putus.

Komponen Terkawal

Ini adalah input borang yang nilainya dikawal oleh React State. Pembolehubah keadaan dikemas kini apabila nilai input berubah dan nilai input ditetapkan secara eksplisit melalui prop nilai.

Pengendali acara onChange digunakan untuk mengemas kini keadaan.

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

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

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

Dalam contoh di atas, pembolehubah keadaan nama mengawal nilai medan input. Fungsi handleChange mengemas kini keadaan nama apabila nilai input berubah dan nilai input ditetapkan kepada nilai Semasa pembolehubah keadaan nama melalui prop nilai.

Komponen Tidak Terkawal

Komponen Tidak Terkawal ialah input borang yang mengurus keadaannya secara dalaman, dan bukannya dikawal oleh React State. Anda boleh mengakses nilai semasa input menggunakan ref selepas borang diserahkan atau bila-bila masa diperlukan.

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

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

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

Dalam contoh di atas ini, inputRef digunakan untuk mencipta ref untuk medan input. Fungsi handleSubmit mengakses nilai semasa input menggunakan inputRef.current.value. Logik penyerahan borang boleh dilaksanakan untuk menggunakan nilai input seperti yang diperlukan.

Atas ialah kandungan terperinci Komponen Terkawal/Tidak Terkawal Tindak Balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!