3 Cara mengambil value dari form di React JS

Ada banyak cara dalam mengambil value dari input form di React JS baik itu menggunakan useState bawaan dari React Hooks maupun dari form itu sendiri. Pada artikel kali ini saya akan memperlihatkan 3 cara dalam mengambil value dari form di React JS.

Sebelum itu mari kita tentukan casenya terlebih dahulu, misalkan kita ingin menampung data profile dimana data profile terdiri dari { name, email, noHp } dari sini kita sudah tahu, kita akan membutuhkan sebuah form dimana form tersebut ber-isi 3 inputtan untuk meng-inputkan data profile yang akan kita simpan.

Kemudian bagaimana kita mengambil value dari masing-masing inputtan dari form? nah berikut adalah 3 cara untuk mendapatkan value dari form tersebut.

1. Menggunakan UseState

Pertama kita bisa membuatkan useState pada masing-masing inputtan, contoh:

Selanjutnya sambungkan useState diatas pada masing-masing inputtan-nya seperti pada gambar dibawah ini:

Kemudian buat function untuk menampung data profile yang baru dimasukkan seperti pada gambar dibawah ini:

Pada button save di onClick-nya panggil function handleSubmitForm

Berikut adalah SS full codenya:

2. Menggunakan UseState dengan pendekatan yang berbeda

Pertama buat useState untuk menampung data profilenya seperti pada gambar dibawah ini:

Selanjutnya buat 1 function untuk menghandle perubahan usestate diatas seperti pada gambar dibawah ini:

Kemudian sambungkan useState dan function diatas pada masing-masing inputtan-nya seperti gambar berikut:

Lalu buat function untuk menampung data profile yang baru dimasukkan seperti pada gambar dibawah ini:

berikut adalah SS full code programnya:

3. Menggunakan Form

Pertama pada form inputtan pastikan bahwa masing-masing inputtan sudah diberikan attribute name seperti pada gambar dibawah ini:

Selanjutnya buat 1 function untuk menghandle form on submit seperti gambar dibawah ini:

Kemudian sambungkan function tersebut pada form inputtan, dan berikut adalah SS full code programnya:

Kesimpulan

Dari ketiga cara diatas saya lebih menyukai cara yang kedua, karena kita hanya membuat 1 useState saja, berbeda dengan cara pertama kita harus membuat banyak useState sebanyak inputtan yang kita butuhkan dan itu seperti terlihat redundant meskipun data yang di handle itu berbeda.

Sumber :

Github: https://github.com/Dwipasca/3methods-get-value-from-form-reactjs

images sampul artikel : link image sampul