Belajar Handling Event pada React.js - Universitas Safin Pati

Hola Amigos!

Bertemu kembali bersama saya Gina Ferlindawati pada blog kali yang membahas tentang Event Handle di React.js. Nah, sebelum kita praktik membuat handling event, kita akan belajar tentang apa sih handling event itu?

Handling events menggunakan elemen React sama seperti menggunakan handling event pada elemen DOM Javascript.

Terdapat beberapa perbedaan syntak yaitu:

• Events React diberi nama menggunakan camelCase, bukan lowercase.
• Dengan JSX Anda meneruskan fungsi sebagai pengendali kejadian, bukan string.

Even adalah sesuatu yang terjadi di elemen, misalnya onClick (jadi saat di klik akan melakukan perubahan sesuai dengan state yang di setting. 

Even di dalam reactjs sudah kita pelajari sebelumnya dengan menggunakan onClick. Untuk kali ini kita akan mempraktekan even onChange. 

Buat file dengan nama HandlingEven.js di folder src Anda, sbb:

Berikut penjelasan dari script diatas:

• Tahap pertama adalah inisialisasi state yang dinyatakan dalam constructor. Pada coding kali ini, kita tidak menggunakan props, jadi kosongkan saja atribut conscructor dan super. 
• Kita juga set data awal state melalui code this.state yang mempunyai satu data dengan nama data yang memiliki nilai awal (default) adalah kosong di data: ‘’.

 

• Membuat fungsi handleChange() yang digunakan untuk mengubah / mengupdate state. Jadi, nilai awal state yang semula kosong akan berubah nilai statenya menjadi data yang di input pada form this.setState({ data: event.target.value }) 

• Membuat fungsi render, kita melakukan pembacaan state untuk di tampilkan dengan dinyatakan code {this.state.data} 
• Kita juga membuat elemen input dengan event onChande yang akan menjalankan fungsi handleChange() yang berfungsi untuk mengubah state awal yang kosong menjadi apapun yang di tulis di elemen input.

Kemudian buat file app.js

Hasil running di browser:

Oke, latihan kita kali ini telah selesai. Terima kasih telah mencoba membuat event handle pada React.js bersama saya. Sampai berjumpa kembali pada blog selanjutnya. See you when i see you friends :)

Nama : Gina Ferlindawati

NIM : 2022102004

Prodi : Teknik Informatika

Matkul : Advance Web Programming

Dosen : Sutrisno, M.Kom.