7. Event Handling | Belajar React js pemula

7. Event Handling | Belajar React js pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

React event handling functions

Pada tutorial kali ini kita akan belajar tentang Event Handling pada react, apa itu Event Handling ? adalah sebuah cara untuk menangani setiap event yang terjadi pada website kita. Misalkan event Click, Event Handling sangat penting karena setiap website pasti memiliki event, sebagai contoh misalkan didalam websitemu terdapat form pendaftaran, didalam form pendaftaran pasti memiliki event submit untuk mengirim data ke server dan kemudian di proses oleh server.

langsung aja kita praktek aja

Event Handling sangat mudah jika temen-teman sudah terbiasa menulis event pada html dan js. ayo kita lihat perbandinganya.

 

//html
<button id="foobutton" onclick="handleClick()">
  simpan
</button>

//js
function handleClick() {
  alert('tombol simpan diclik');
};

sedangkan pada react js tidak akan jauh berbeda.

//code react
class ButtonMe extends Component {
  handleClick = () => {
    alert('tombol di clik');
  }
  render() {
    return <button onClick={this.handleClick}>kilk saya</button>
  }
}

didalam react ada beberapa cara penulisana Event Handling, cara pertama memelukan bind pada constructor dan cara kedua menggunakan penulisan arrow function, cara penulisan ini tidak memerlukan bind pada constuktor contohnya bisa di lihat pada code dibawah ini.

// cara pertama
class Component1 extends Component {
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
    alert('clicked.');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

// cara kedua
class Component1 extends Component {
  handleClick = () => {
    alert('clicked.');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

Latihan Event Handling

pada latihan ini tidak hanya belajar Event Handling tapi sekaligus belajar state dan cara merubah state dengan Event Handling.

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      num:10
    }
 this.increment=this.increment.bind(this);
  }
  increment(){
    this.setState({
      num:this.state.num + 1
    })
  }
 decrement=()=>{
    this.setState({
      num:this.state.num - 1
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <div>{this.state.num}</div>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

export default App;

Mau liat atau download source code aplikasi premium bisa disini.

Tweet