State React

  • Post
    State React

    State adalah struktur yang dapat diperbarui yang digunakan untuk menampung data atau informasi tentang komponen. Keadaan dalam suatu komponen dapat berubah seiring waktu. Perubahan status dari waktu ke waktu dapat terjadi sebagai respons terhadap tindakan pengguna atau peristiwa sistem. Komponen dengan status dikenal sebagai komponen berstatus. Ini adalah jantung dari komponen react yang menentukan perilaku komponen dan bagaimana ia akan dirender. Mereka juga bertanggung jawab untuk membuat komponen menjadi dinamis dan interaktif.

    Sebuah state harus dibuat sesederhana mungkin. Itu bisa disetel dengan menggunakan metode setState () dan memanggil metode setState () akan memicu pembaruan UI. Status mewakili negara bagian atau informasi lokal komponen. Ini hanya dapat diakses atau dimodifikasi di dalam komponen atau oleh komponen secara langsung. Untuk menyetel keadaan awal sebelum interaksi apa pun terjadi, kita perlu menggunakan metode getInitialState () .

    Misalnya , jika kita memiliki lima komponen yang membutuhkan data atau informasi dari negara bagian, maka kita perlu membuat satu komponen penampung yang akan menyimpan status untuk semuanya.

    Mendefinisikan State

    Untuk menentukan status, Anda harus terlebih dahulu mendeklarasikan satu set nilai default untuk menentukan status awal komponen. Untuk melakukan ini, tambahkan konstruktor kelas yang menetapkan status awal menggunakan this.state. Properti ‘ this.state ‘ bisa dirender di dalam metode render () .

    Contoh

    Kode contoh di bawah ini menunjukkan bagaimana kita dapat membuat komponen stateful menggunakan sintaks ES6.

    1. import React, {Component} dari  ‘react’ ;
    2. class App  Extends Component {
    3. constructor () {
    4. super ();
    5. ini .state = {displayBio:  true  };
    6. }
    7. render () {
    8. const  bio =  ini .state.displayBio? (
    9. <p> <h3> Javatpoint adalah salah satu lembaga pelatihan Java terbaik di Noida, Delhi, Gurugram, Ghaziabad, dan Faridabad. Kami memiliki tim pengembang dan pelatih Java berpengalaman dari perusahaan multinasional untuk mengajar siswa kampus kami. </h3> </p>
  • ):  null ;
  • return (
  • <h1> Selamat datang di JavaTpoint !! </h1>
  • {bio}
  • );
  • }
  • }
  • exsport  default App;
  • Untuk menyetel status, diperlukan untuk memanggil metode super () di konstruktor. Itu karena this.state tidak diinisialisasi sebelum metode super () dipanggil.

     

    Changing the State

    Kita bisa mengubah status komponen dengan menggunakan metode setState () dan meneruskan objek status baru sebagai argumen. Sekarang, buat metode baru toggleDisplayBio () dalam contoh di atas dan ikat kata kunci ini ke metode toggleDisplayBio () jika tidak kita tidak dapat mengakses ini di dalam metode toggleDisplayBio ().

    1. ini .toggleDisplayBio =  ini .toggleDisplayBio.bind ( ini );

    Contoh

    Dalam contoh ini, kita akan menambahkan tombol ke metode render (). Mengklik tombol ini memicu metode toggleDisplayBio () yang menampilkan keluaran yang diinginkan.

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends Component {
    3. Constructor () {
    4. super ();
    5. this.state = {displayBio:  false  };
    6. log ( ‘Buat komponen ini’ ,  this );
    7. this .toggleDisplayBio =  this .toggleDisplayBio.bind ( this );
    8. }
    9. toggleDisplayBio () {
    10. this .setState ({displayBio:! this .state.displayBio});
    11. }
    12. render () {
    13. return (
    14. <h1> Selamat datang di JavaTpoint !! </h1>
    15. {
    16. this .state.displayBio? (
    17. <p> <h4> Javatpoint adalah salah satu lembaga pelatihan Java terbaik di Noida, Delhi, Gurugram, Ghaziabad, dan Faridabad. Kami memiliki tim pengembang dan pelatih Java berpengalaman dari perusahaan multinasional untuk mengajar siswa kampus kami. </h4> </p>
    18. <button onClick = { this .toggleDisplayBio}> Tampilkan Lebih Sedikit </button>
    19. ): (
    20. <button onClick = { this .toggleDisplayBio}> Baca Selengkapnya </button>
    21. )
    22. }
    23. )
    24. }
    25. }
    26. export  default App;

    Ketika Anda mengklik tombol Read More , Anda akan mendapatkan output di bawah ini, dan ketika Anda mengklik tombol Show Less , Anda akan mendapatkan output seperti yang ditunjukkan pada gambar di atas.

     

    credit. javatpoint

     

     

     

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.