Bagaimana cara menambahkan placeholder untuk memilih tag di React

Dalam tutorial ini, kita akan belajar tentang cara menyetel teks placeholder ke a <select> (tag) di Bereaksi.

Beberapa elemen bentuk HTML misalnya input, textarea kami memiliki built-in placeholder atribut untuk menambahkan teks placeholder.

<input placeholder="Name"/>
<textarea placeholder="comment"></textarea>

Tapi untuk tag pilih, kita tidak bisa menggunakan html placeholder atribut bukannya kita bisa melakukannya seperti ini.

Mengatur placeholder untuk memilih tag

Untuk menyetel placeholder ke a select tag, kita dapat menggunakan <option> elemen diikuti oleh disabled dan hidden atribut.

Berikut adalah contoh, yang menambahkan placeholder “Pilih mobil Anda” ke tag pilih:

aplikasi.js

import React, { useState } from "react";

export default function App() {
  const [value, setValue] = useState("default");
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <select defaultValue={value} onChange={handleChange}>
        <option value="default" disabled hidden>
          Choose your car        </option>
        <option value="audi">Audi</option>
        <option value="bmw">Bmw</option>
        <option value="benz">Benz</option>
      </select>
      <button>Submit</button>
    </form>
  );
}
  1. Dalam kode di atas, pertama-tama kita atur a useState() kaitkan nilai awal ke default dan menambahkan value="default" ke opsi “Pilih mobil Anda” sehingga berfungsi sebagai pengganti untuk tag pilih.
  2. Itu disabled atribut membuat opsi tidak dapat memilih.
  3. Setiap kali pengguna mengklik dropdown pilih hidden atribut membuat opsi ini tersembunyi dan menunjukkan opsi yang tersisa.