Jumat, 11 Oktober 2019

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 aja
disini 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 :

  1. this.handleClick = this.handleClick.bind(this)  

   cara binding seperti ini diperlukan unutk membuat this dapat berfungsi pada callback 

binding


  1. handleClick(){  
  2.      this.setState((state)=>({  
  3.          toggleStatus : !state.toggleStatus  
  4.      }))  
  5.  }  

    Membuat fungsi ketika diklik jalankan aksi,  toggleStatus : !state.toggleStatus  

maksudnya nilai kebalikan dari toggleStatus, kita deklarasukan diatas nilai 

toggleStatus: true, berarti ! kebalikannya

  1. <button onClick={this.handleClick}>  
  2.            {this.state.toggleStatus ? 'ON''OFF'}  
  3.            </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