Form & Input di React | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

Form & Input di React | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

value

jsx

import React, { useState } from 'react';
 
function FormNama() {
  // 1. Bikin state buat nyimpen nilai input nama
  const [namaInput, setNamaInput] = useState(''); // Nilai awal string kosong
 
  // 2. Fungsi handler buat ngupdate state pas input berubah
  const handleInputChange = (event) => {
    // event.target ngacu ke elemen input
    // event.target.value ngambil nilai terbaru dari input
    setNamaInput(event.target.value); 
    console.log("Nilai input sekarang:", event.target.value); 
  };
 
  // 3. Fungsi handler buat pas form di-submit
  const handleSubmit = (event) => {
    event.preventDefault(); // Mencegah reload halaman default pas form submit
    alert(`Halo, ${namaInput}! Namamu sudah terkirim (pura-puranya).`);
    // Di sini kamu bisa ngelakuin sesuatu sama namaInput (misal, kirim ke API)
    setNamaInput(''); // Kosongin lagi input field setelah submit (opsional)
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="inputNamaPengguna">Nama Pengguna:</label>
      <input 
        type="text" 
        id="inputNamaPengguna"
        value={namaInput}      // 4. Nilai input DIKONTROL sama state 'namaInput'
        onChange={handleInputChange} // 5. Setiap perubahan di input manggil handleInputChange
        placeholder="Ketik namamu di sini..."
      />
      <button type="submit">Kirim Nama</button>
    </form>
  );
}
 
export default FormNama;

jsx

function FormKomentar() {
  const [komentar, setKomentar] = useState('');
 
  const handleKomentarChange = (event) => {
    setKomentar(event.target.value);
  };
 
  // ... (handleSubmit function) ...
 
  return (
    <form /* onSubmit={handleSubmit} */ >
      <label htmlFor="areaKomentar">Komentar Anda:</label>
      <textarea 
        id="areaKomentar"
        value={komentar}
        onChange={handleKomentarChange}
        rows="4"
        placeholder="Tulis komentarmu..."
      />
      <button type="submit">Kirim Komentar</button>
    </form>
  );
}

jsx

function FormPilihan() {
  const [pilihanBuah, setPilihanBuah] = useState('jeruk'); // Nilai awal 'jeruk'
 
  const handleBuahChange = (event) => {
    setPilihanBuah(event.target.value);
  };
 
  // ... (handleSubmit function) ...
 
  return (
    <form /* onSubmit={handleSubmit} */ >
      <label htmlFor="selectBuah">Pilih Buah Favorit:</label>
      <select id="selectBuah" value={pilihanBuah} onChange={handleBuahChange}>
        <option value="apel">Apel</option>
        <option value="jeruk">Jeruk</option>
        <option value="mangga">Mangga</option>
        <option value="pisang">Pisang</option>
      </select>
      <p>Kamu memilih: {pilihanBuah}</p>
      <button type="submit">Simpan Pilihan</button>
    </form>
  );
}

jsx

function FormCheckbox() {
  const [setujuSyarat, setSetujuSyarat] = useState(false);
 
  const handleCheckboxChange = (event) => {
    setSetujuSyarat(event.target.checked); // true kalau dicentang, false kalau enggak
  };
 
  return (
    <form>
      <label>
        <input 
          type="checkbox"
          checked={setujuSyarat}
          onChange={handleCheckboxChange}
        />
        Saya setuju dengan syarat dan ketentuan.
      </label>
      <p>Status persetujuan: {setujuSyarat ? "Setuju" : "Tidak Setuju"}</p>
    </form>
  );
}

jsx

function FormRadio() {
  const [gender, setGender] = useState('pria'); // Nilai awal
 
  const handleGenderChange = (event) => {
    setGender(event.target.value);
  };
 
  return (
    <form>
      <p>Pilih Jenis Kelamin:</p>
      <label>
        <input 
          type="radio" 
          value="pria" 
          checked={gender === 'pria'} // Checked kalau state 'gender' sama dengan value radio ini
          onChange={handleGenderChange} 
        />
        Pria
      </label>
      <label style={{ marginLeft: '10px' }}>
        <input 
          type="radio" 
          value="wanita" 
          checked={gender === 'wanita'} 
          onChange={handleGenderChange} 
        />
        Wanita
      </label>
      <p>Jenis kelamin terpilih: {gender}</p>
    </form>
  );
}

jsx

function FormLengkap() {
  const [nama, setNama] = useState('');
  const [email, setEmail] = useState('');
 
  const handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name; // Ambil atribut 'name' dari input
 
    if (name === "inputNamaForm") {
      setNama(value);
    } else if (name === "inputEmailForm") {
      setEmail(value);
    }
  };
 
  // ... (handleSubmit) ...
 
  return (
    <form /* onSubmit={handleSubmit} */>
      <div>
        <label htmlFor="namaUser">Nama:</label>
        <input 
          type="text" 
          id="namaUser" 
          name="inputNamaForm" /* Kasih atribut name! */
          value={nama} 
          onChange={handleInputChange} 
        />
      </div>
      <div>
        <label htmlFor="emailUser">Email:</label>
        <input 
          type="email" 
          id="emailUser"
          name="inputEmailForm" /* Kasih atribut name! */
          value={email}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">Daftar</button>
    </form>
  );
}

jsx

function FormObjekState() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });
 
  const handleChange = (event) => {
    const { name, value } = event.target; // Destructure name dan value dari event.target
    setFormData(prevState => ({
      ...prevState, // Salin semua state lama
      [name]: value  // Update state yang propertinya cocok sama 'name' input
                     // [name] ini computed property name ES6
    }));
  };
  
  // ... handleSubmit ...
  return (
    <form>
      <input type="text" name="username" value={formData.username} onChange={handleChange} />
      <input type="password" name="password" value={formData.password} onChange={handleChange} />
      {/* ... */}
    </form>
  );
}