Menu

Rangkuman: Formulir & input

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 32 dari 42.

Tantangan

Sedang

Ulasan bab. Buat pemilih nama panggilan dengan siklus input terkontrol yang lengkap: ketik, lihat umpan balik langsung, lalu hapus.

Buat input (id="nick") terkontrol dengan state nick, yang dimulai dalam keadaan kosong.
Paragraf (id="meter") menampilkan N of 12, dengan N adalah panjang nama panggilan saat ini (misalnya, mengetik Coddy → 5 of 12), dihitung, bukan disimpan.
Tombol id="clear" mengosongkan nama panggilan dan kotak input.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Semua pelajaran di Dasar-Dasar

1Mengenal React

Apa Itu React?Komponen Pertamamu Aturan Satu Induk JSX Bukan HTML Rangkuman: Mengenal React

4Props

Apa Itu Props?Meneruskan Props Dua Props Komponen yang Sama, Data Baru Prop Children Ringkasan: Props

7Kondisi & List

Render dengan ternary Tampilkan dengan &&Render sebuah list Key itu penting Filter, lalu map Ulasan: Kondisi & List

2Ekspresi JSX

Kurung Kurawal Matematika dalam Kurung Kurawal Kurung Kurawal dalam Atribut Memanggil Fungsi di JSX Ulasan: Ekspresi JSX

5State dan Event

Apa Itu State?Penghitung Klik Menghitung dengan Langkah Beralih dengan State State Independen Ringkasan: State dan Event

8Proyek: Kartu Profil

Langkah 1: Struktur Kartu Langkah 2: Kartu dengan Props Langkah 3: Tombol Suka Langkah 4: Toggle Ikuti

3Komponen

Blok Penyusun Komponen Keduamu Gunakan Kembali Komponen Susun Halaman Rangkuman: Komponen

6Formulir & input

Input Terkontrol Tampilkan Kembali Input Penghitung Karakter Tombol HapusRangkuman: Formulir & input