lifelong learner — urip iku urup, currently working on accenture.

React – Form handling : Dasar Controlled Component

0
Degananda.com -

Form pada suatu aplikasi sangatlah penting dan pasti digunakan(minimal untuk form login). Form pada React memiliki behavior yang berbeda jika dibandingkan dengan form html biasannya. Bagaimanakah cara membuat form dengan aturan react ? silahkan simak ulasan ini.

Selayang pandang

Pertama-tama kita akan membahas cara konvensional pembuatan form pada html biasa (non react). yakni dengan menggunakan syntax <form> yang memiliki salah satu attribute berupa method. Isi dari attribute tersebut adalah POST dan GET. Jika memilih method POST maka akan disubmit ke halaman lain (meksipun diarahkan pada halaman yang sama tetap akan melakukan reload) begitu pula dengan method GET.

Berikut ini adalah contoh form sederhana yang menerima input berupa nama yang dibuat dengan cara konvensional pada html umumnya. Elemen form seperti dibawah ini bekerja sangat berbeda dibandingkan DOM pada react. Namun persamaanya adalah form konvensional seperti dibawah ini memiliki elemen penyusun yang sama yakni form input seperti <input>, <select> , <option> ataupun <textarea> serta <input type=button> untuk mensubmit form tersebut.

<form>
  <p>
    <label> nama </label>
    <input type="text" name="name" />
  </p>
  <p>
    <input type="submit" value="submit" />
  </p>
</form>

Pada react default behavior seperti itu tentunnya sangat tidak di izinkan untuk dilakukan meningat react adalah library yang digunakan untuk membuat SPA(Single page application). Aplikasi SPA tidak di izinkan untuk melakukan refresh (meski satu halaman) melainkan reload hanya pada komponen-komponen tertentu oleh karena itu disebut sebagai SPA. Perhatikan gambar dibawah ini saat form tersebut di klik submit maka yang terjadi adalah reload page.

Form html diatas akan dihandle dengan menggunakan javascript sesuai dengan aturan react. Terdapat dua metode mengcontrol pada react yakni controlled component dan uncontrolled component. Pada ulasan ini akan membahas form handling pada react dengan menggunakan controlled component.

Controlled Component

Syntax <input>, <select> , <textarea> dan form input lainnya melakukan manajemen “state” pada dirinnya sendiri dan state tersebut akan berubah sesuai dengan isi dari input tersebut. Pada react kita telah mengenah bahwa state bersifat mutable a.k.a dapat berubah nilainya. Perubahan tersebut dapat kita lakukan melalui fungsi setState().

Form pada react harus kita atur flow dari state. Baik pada saat form input pertama kali dibuat kemudian terjadi perubahan hingga pada saat disubmit oleh user. Hal seperti inilah yang disebut dengan controlled component. Pengaturan tersebut kita lakukan menggunakan javascript. Contohnya kita akan mentransformasikan kode html konvensional diatas menjadi react controlled component (form). Kasus dibawah ini form berupa satu buah <input>

constructor(props){
  super(props);

  // bind kedua handler agar dapat menggunakan this
  this.onSubmit = this.onSubmit.bind(this);
  this.handleChange = this.handleChange.bind(this);

  this.state = {
    // form value boject
    formValue : {
      name : ''
    }
  }
}

handleChange(event){
  this.setState({
    formValue : {
      name : event.target.value
    }
  });
}

onSubmit(event){
  event.preventDefault();
  console.log(this.state.formValue);
}

render() {
  return (
<form onSubmit={this.onSubmit}>
  <p>
    <label> nama </label>
    <input type="text" value={this.state.formValue.name} onChange={this.handleChange} />
  </p>
  <p>
    <input type="submit" value="submit" />
  </p>
</form>
  );
}

Ada beberapa hal yang perlu dilakukan dalam membuat controlled component pada react (konteks : form). Untuk mempermudah memahami berikut ini adalah langkah-langkahnya :

  1. Buat form
  2. Form handler menggunakan attribute onSubmit , ingat tulisan menggunakan camelCase
  3. Buat input , contoh diatas adalah <input type=”text”>
  4. Berikan dua atribut (wajib) pada input yakni value dan onChange
  5. Buat state yang merupakan model dari form. Contoh diatas object formValue dengan child Berupa name
  6. Atribut value pada input diambil dari nilai state
  7. Atribut onChange berikan nilai berupa formHandler yang akan memanggil fungsi setState. Fungsinnya adalah merubah state pada komponen.
  8. Pada form handler (onSubmit) jangan lupa untuk memberikan fungsi e.preventDefault() untuk menghilangkan default behavior dari browser agar saat di klik submit tidak mengarahkan ke halaman baru.
  9. Jangan lupa melakukan bind terhadap handler pada form. hal ini wajib , jika handler tidak dilakukan binding terhadap komponen maka tidak dapat menggunakan fungsi this. Padahal fungsi this tersebut digunakan untuk merubah state dari komponen (setState).

untuk mengambil nilai dari suatu input kita menggunakan handler dimana fungsi untuk mengambil valuenya adalah event.target.value. Jika lupa apa saja nilai pada event tersebut dapat melakukan logging pada browser dengan perintah console.log.

kode diatas jika dijalankan akan menghasilkan tampilan seperti berikut ini

pada saat disubmit maka pada log akan menghasilkan seperti berikut