Latihan 2: Form di React — React

Latihan 2 dari materi Form di React di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya state username dan password, dan handleSubmit yang memanggil e.preventDefault() lalu console.log(username). Biarkan semuanya. Ganti return null dengan form:

<form onSubmit={handleSubmit}> sebagai pembungkus.
Di dalamnya, <input id="username" /> dan <input id="password" type="password" />, dua-duanya controlled: value dari state-nya dan onChange yang memanggil setter-nya.
<button id="submit" type="submit">Login</button>, juga di dalam form, supaya kliknya mengirim form.

Yang dicek:

Ada #username, #password, dan elemen form.
Kodenya memakai onSubmit, value={username}, dan value={password}.
#password punya type="password".
Pengecek mengetik Budi di #username, lalu menekan #submit. Sesudah itu console harus memuat Budi.

Hint

Kirim form ditangani di <form> lewat onSubmit. Menekan tombol type submit di dalam form memicu onSubmit itu, dan handleSubmit dari kode awal sudah mencetak username.
Bungkus semuanya dengan <form onSubmit={handleSubmit}>. Tiap input diberi value dari state-nya dan onChange yang memanggil setUsername atau setPassword dengan e.target.value. Tombolnya type submit di dalam form.
return ( <form onSubmit={handleSubmit}> <input id="username" value={username} onChange={(e) => setUsername(e.target.value)} /> <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button id="submit" type="submit">Login</button> </form> )

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Form di React — React

Hint

Memperbarui Aplikasi