10. Menghandle Form Pada React Js | Belajar React Js pemula

10. Menghandle Form Pada React Js | Belajar React Js pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

Menghandle Form Pada React Js

pada tutorial kali ini kita akan belajar menghandle form pada react js, tutorial ini sangat penting karen setiap website pasti memiliki form yang digunakan untuk berintraksi dengan user. sebelum masuk tutorial ini teman-teman harus paham materi props, state dan event handling. jika belum silahkan jelajahi blog saya disini sudah ada meteri tersebut. magsud dari handle from adalah bagaimana caranya mengambil value yang ada di dalam file input lalu dikirim ke backend melalui rest api.

langsung saja kita buat form sederhana menggunakan react js

import React, { Component } from "react";
class App extends Component {
  constructor(){
    super();
 this.state={
      email:'',
      password:''
    }
  }
  //mengambil text value dari input 
  //kemudia di pindahkan ke state
 onChang=(e)=>{
    this.setState({
      [e.target.id]:e.target.value
    })
  }
  //mengumpulkan data dari state untuk di kirimkan ke server
 onSubmit=()=>{
    let data={
      email:this.state.email,
      password:this.state.password
    }
    console.log(data);
  }
  render() {
    return <div>
        <input type="email" id="email" placeholder="masukan email" onChange={this.onChang} /><br/>
        <input type="password" id="password" placeholder="Masukan password" onChange={this.onChang}/><br/>
        <button type="button" onClick={this.onSubmit}>login</button>
    </div>;
  }
}
export default App;

pada code di atas dibagian submit saya menggunakan console.log karena kita belum belajar bagaimana manacaranya mengirim data ke server menggunakan react js, nanti akan saya bahas pada tutorial selanjutnya. untuk tag input lainya sama saja caranya menghandle.
Mau liat atau download source code aplikasi premium bisa disini.

Tweet