Toggle Di ReactJS
Hi apa kabar semuanya salam koding, ini tread pertama gua dalam belajar pemrograman, oiya btw disini gua lagi belajar ReactJS ya salah satu framework javascript yang paling populer. ada juga framework lain seperti Vue js, Angular Js dll. kenapa saya pakai ReactJS kenapa gak pakai framework lain? alasan pertama karna ada teman programmer yang bisa untuk ditanya hehe :D dahlah males langsung ajadisini gua mau ngasih tutorial membuat toogle status dengan React JS ya kaya kalau di klik bisa ON OFF fungsi gitu hehe
1.Buat komponen class dengan nama bebas, disini saya pakai nama komponen Toggle
Ket :
- this.handleClick = this.handleClick.bind(this)
cara binding seperti ini diperlukan unutk membuat this dapat berfungsi pada callback
binding
- handleClick(){
- this.setState((state)=>({
- toggleStatus : !state.toggleStatus
- }))
- }
Membuat fungsi ketika diklik jalankan aksi, toggleStatus : !state.toggleStatus
maksudnya nilai kebalikan dari toggleStatus, kita deklarasukan diatas nilai
toggleStatus: true, berarti ! kebalikannya
- <button onClick={this.handleClick}>
- {this.state.toggleStatus ? 'ON': 'OFF'}
- </button>
kemudian kita render menggunakan fungsi ES6, Jadideeh :D
sekian untuk informasi kali ini sampai jumpa di tread selanjutnya. Happy Coding!
Tidak ada komentar:
Posting Komentar