-->

AK Studio

Tutorial Programming Bahasa Indonesia

›

Tutorial Belajar Reactjs #5: Mengenal State dan Event Pada Reactjs

Add Comment

 

Mengenal State dan Event Pada Reactjs


Materi pada Tutorial kali ini merupakan materi lanjutan dari tutotial sebelumnya tentang , Tutorial Belajar Reactjs #4: Mengenal Props dan Styling Pada Component Reactjs. Untuk mempermudah memahami materi pada tutorial part05 ini , ada baik nya membaca tutorial sebelumnya

pada materi Tutorial Belajar Reactjs #5: Mengenal State dan Event Pada Reactjs, ini kita akan membahas dan mempelajari apa itu State pada react-js dan cara memberi event pada react js.

langsung daja silahkkan buka folder project tutorial prat sebelumnya, dan kode editor kalian, lalu buat folder baru ,dan beri nama misal tutorial part 5 State dan Event pada react js. sebelum lanjut ke pengkodingan, saya akan coba menjelaskan sedikit apa itu state dan event pada react js.


#Penjelasan Singkat

- Apa itu State...?

this.state = {
    nama: '',
    hobi: ''
}

    State adalah data private dari sebuah component, state ini hanya dapat di gunakan oleh component itu sendiri, dalam kata lain state ini tidak dapat di panggil oleh component lain, berbeda dangan props yang dapat di panggil, dan di gunakan oleh component lain, state ini hanya bisa diginakan dalam satau component yang memiliki state tersebut, dan dapat di gunakan untuk merubah dirinya sendiri,

contoh kasus, kita memiliki component A , yang mana pada component ini memiliki sebuah state berupa nama, nilai atau value dari state nama ini hanya dapat di ubah oleh component A sendiri, namu state ini juga memiliki kekurangan, ya itu apa bila terjadi refresh halaman pada component A maka, nilai dari state tersebut akan hilang, atau kembali ke nilai default dari state nya.

sedangkan Event Merupakan sebuah funsi atau aksi yang kita gunakan untuk merupah data atau value dari sebuah state, untuk lebih jelasnya langsung kita peraktekan saja


1.Buat file Index.html baru

kita akan coba memperaktek kan contoh kasus di atas, buat sebuah sturuktur dasar component , dan beri nama misal component profile disini kita menggunakan class component. sperti code di bawah ini.

Profile Component  

  class Profile extends React.Component { 
	constructor(props) {
	super(props);
	this.state = {
	 nama: 'Maulana',
	 hobi: 'Programing',
	}
				
	 //deklarasi fungsi
	  this.handleOnClick = this.handleOnClick.bind(this);
	} 
		
			
	handleOnClick(event) {
         alert('Nama : ' + this.state.nama +   '\n Hobi :' +this.state.hobi);
	);
				
}
			
render() { 
    return(
	<div>
           <h3 className="form-titel">Mengenal State Dan Event React Js</h3><hr/>
	   <form >
		<div className="form-body" >
		 <div className="form-titel"><h2>Form Profile</h2></div>
         
		 <input type="text" 
                        name="nama" 
		        placeholder="Masukan Nama.." />

		 <input type="text"
			name="hobi" 
			placeholder="Masukan Hobi.." />

		<button className="btn" type="button" onClick={this.handleOnClick}>Submit</button>
	     </div>								
	   </form>
	</div>
     ) 		
}


agar tampilan from nya terlihat rapih tambahkan style berikut.
.form-body {
    margin: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    padding: 20px;
    width: fit-content;
}

.form-titel {
    text-align: center;
    font-size: 15px;
    font-style: bold;
    font-family: Arial, Helvetica, sans-serif;
}

input[type=text],
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

untuk keseluruhan koding dari file index.html kita saat ini seperti berikut ini 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css">
    <!-- REACT LIBRARY-->
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <!-- REACT DOM LIBRARY-->
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <!--BABEL LIBRARY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <title>Belajar React part04</title>
</head>

<body>
    <div id="app">Isi konten rout react JS</div>
    <script type="text/babel">

        class Profile extends React.Component { 
	      constructor(props) {
		super(props);
		this.state = {
		   nama: '',
		   hobi: '',
		}
				
		//deklarasi Event
		this.handleOnClick = this.handleOnClick.bind(this);
	      } 
				
        handleOnClick(event) {              		
	    alert('Nama : ' + this.state.nama +   '\n Hobi :' +this.state.hobi);			
        }
		
	render() { 
	   return(
	    <div>
               <h3 className="form-titel">Mengenal State Dan Event React Js</h3><hr/>
	        <form >
		  <div className="form-body" >
		     <div className="form-titel"><h2>Form Profile</h2></div>
         
		   <input type="text" name="nama" 
		          onChange={this.handleChange}
		          placeholder="Masukan Nama.." />
 
		   <input type="text"
			  name="hobi" 
			  onChange={this.handleChange}  
			  placeholder="Masukan Hobi.." />
 
		    <button className="btn" type="button" onClick={this.handleOnClick}>Submit</button>
	        </div>								
	      </form>
	    </div>
                  ) 		
	}
     } 
		
    ReactDOM.render(
      <div>
        <Profile/>
        </div>, document.getElementById("app") );
    </script>
</body>
</html>

lalu coba jalankan maka hasil nya seperti gambar di bawah ini...

#Hasil Runing..




ketika Button Submit di klik



#Penjelasan Coding

Pada Profile Component 
  • line 4 - 7 kita medeklarasikan sebuah state
  • line 10  kita medeklarasikan Event untuk merubah State
  • line 14-17 kita membuat sebuah fungsi yang bernama handleClick, yang mana dalam fungsi ini terdapat perintah menampilkan Alert Yang berisi value dari state yang telah kita buat
  • line 38, kita memberikan Event pada button Sumbit, yang mana event ini memanggil fungsi dari handleOnClick yang telah kita buat.

ketika button Submit di click maka akan menampilkan alert yang berisi text Nama dan Hobi. seperti gambar Hasil Runing Di atas.

akan tetapi nilai state nya telah kita tentukan dari awal, sehingga ketika  kita menulis apa pun pada input text nya nilai state akhir akan tetap sama.

Bagaimana jika mengubah nilai state nya berdasarkan apa yang kita input pada form Profile..?

kita perlu merubah koding class component Profile nya seperti berikut, 

2. Tambahkan fungsi baru

    Buat sebuah fungsi baru dengan nama handelChange, dan jangan lupa kita deklarasikan agar fungsi nya bisa kita gunakan pda component profile.
  //deklarasi fungsi
  this.handleChange = this.handleChange.bind(this);
  } 

  //fungsi Evnt
  handleChange(event) {
   console.log('value',event.target.value);			
  }

lalu pada input text nya tambahkan event onChange, seperti berikut 
 <input type="text" name="nama" 
       onChange={this.handleChange}
       placeholder="Masukan Nama.." />
 
 <input type="text"
       name="hobi" 
       onChange={this.handleChange}  
       placeholder="Masukan Hobi.." />
untuk memastikan fugsi dari event onChange yang kita buat berhasil, kita bisa mekakukan inpsek element di browsernya dengan tekan f12.  lalu lihat pada bagian console nya. apa pun yang kita ketikan pada input text akan tampil pada console. 


lalu untuk mengambil nilai atau value yang di input pada input text nya kita perlu melakukan perubahan pada fungsi hendleChange nya seperti berikut.. 

  handleChange(event) {
    const input = event.target.name;
    const value = event.target.value;
   if (input === 'nama'){				
       this.setState({
	   nama: value
        })
	console.log(input + ': '+ value)
   }else{
     this.setState({
	hobi: value
     })
    console.log(input + ': '+ value)
   }				
 }
#Penjelasan
  • pada Line 2 , kita membuat sebuah variabel yang mana , variabel ini merupakan sebuah callback dari event onChange nya, dengan perintah event,target.name ini berarti kita mencari tag input dengan name apa yang sedang di isi,
  • pada line 3,  kita mengambil value dari tag input nya dengan perintah event,target.value . lalu kita filter berdasarkan nama dari tag input nya
  • pada line 5-7 dan 10-12 , kita melakukan perubahan atau mengeset nilai state yang kita miliki

lalu pada tang input tambahkan value seperti dibawah ini, value ini digunakan untuk mangambil value apa saja yang di tuliskan pada input text di form profile nya. 
  <input type="text" name="nama" 
         onChange={this.handleChange}
	 value={this.state.nama}
	 placeholder="Masukan Nama.." />
 
   <input type="text"
	  name="hobi" 
	  onChange={this.handleChange}  
	  value={this.state.hobi}
	  placeholder="Masukan Hobi.." />

dan untuk saat ini keselurahn dari file index.html yang kita buat sebagai berikut ini. 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css">
    <!-- REACT LIBRARY-->
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <!-- REACT DOM LIBRARY-->
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <!--BABEL LIBRARY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <title>Belajar React part04</title>
</head>

<body>
    <div id="app">Isi konten rout react JS</div>
    <script type="text/babel">

        class Profile extends React.Component { 
	      constructor(props) {
		super(props);
		this.state = {
		   nama: '',
		   hobi: '',
		}
				
		//deklarasi Event        
                this.handleChange = this.handleChange.bind(this);
                this.handleOnClick = this.handleOnClick.bind(this);
	      } 
				
        handleOnClick(event) {              		
	    alert('Nama : ' + this.state.nama +   '\n Hobi :' +this.state.hobi);			
        }
	handleChange(event) {
	  const input = event.target.name;
	  const value = event.target.value;
      
      if (input === 'nama'){				
	      this.setState({
		nama: value
	       })
	      console.log(input + ': '+ value)
	  }else{
	     this.setState({
		hobi: value
              })
           console.log(input + ': '+ value)
	}
			
		
	render() { 
	   return(
	    <div>
               <h3 className="form-titel">Mengenal State Dan Event React Js</h3><hr/>
	        <form >
		  <div className="form-body" >
		     <div className="form-titel"><h2>Form Profile</h2></div>
         
		   <input type="text" name="nama" 
		          onChange={this.handleChange}
			  value={this.state.nama}
		          placeholder="Masukan Nama.." />
 
		   <input type="text"
			  name="hobi" 
			  onChange={this.handleChange}  
			  value={this.state.hobi}
			  placeholder="Masukan Hobi.." />
 
		    <button className="btn" type="button" onClick={this.handleOnClick}>Submit</button>
	        </div>								
	      </form>
	    </div>
                  ) 		
	}
     } 
		
    ReactDOM.render(
      <div>
        <Profile/>
        </div>, document.getElementById("app") );
    </script>
</body>
</html>
lalu save dan jalakan kembali program nya. maka ketika apa pun yang kita masukan pada form Profile dan button submit di klik maka akan dapat di tampilkan pada alert nya.

#Hasil Runing

Entry Form

Saat button Submit Di klik

pada mataeri kali ini kita telah berhasil mempelajari tentang Tutorial Belajar Reactjs #5: Mengenal State dan Event Pada Reactjs.

untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #6.


Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..
Sekian Dan Terima kasih...
#Happy Coding

#Keyword Penelusuran
  • Belajar ReactJs 
  • Tutorial ReactJs
  • Belajar ReactJs Untuk Pemula
  • Tutorial ReactJs Untuk Pemula
  • Jenis Component pada React JS
  • Class Component Pada Reactjs
  • Cara menggunakan Class Component Pada Reactjs
  • Cara memberi style pada component react js
  • State Pada Component React Js
  • Event pada Component React Js
  • SetState di Reactjs

0 Response to "Tutorial Belajar Reactjs #5: Mengenal State dan Event Pada Reactjs"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel