Event Target Value

Pada sesi ini kita akan belajar bagaimana mengambil nilai dari suatu input element menggunakan method.

Berikut adalah caranya:

import React, {Component} from 'react';

class Main extends Component{
  constructor(props){
    super(props);
      this.state = {
        nilai: "Pindah Pertama",
        nilai1: "Pindah Kedua"
      };
      this.rubahDia = this.rubahDia.bind(this);
      this.logPerubahan = this.logPerubahan.bind(this);
  }

  rubahDia(){
    this.setState((state,props)=>{
      return {
        nilai: state.nilai1,
        nilai1: state.nilai
      };
    });
  }

  logPerubahan(e){
    console.log(e.target.value);
  }

  render(){
    return(
      <div>
        <h2>{this.state.nilai}</h2>
        <h2>{this.state.nilai1}</h2>
        <button onClick={this.rubahDia}>Rubah Dia!</button>
        <hr/>
        <input name="inputan" onChange={this.logPerubahan}></input>
      </div>
    );
  }
}

export default Main;

• Uraian:
  • Tambahkan parameter e pada method;
  • Kemudian tambahkan parameter.target.value.

    logPerubahan(e){
      console.log(e.target.value);
    }

  • Console.log akan mengirimpan nilai yang telah kita input pada element input.

  💡

  pada proses pemanggilan kenapa kita tidak menambahkan parameter event atau e? Karena parameter event secara default sudah ada ketika kita menggunakan binding method pada constructor: this.logPerubahan = this.logPerubahan.bind(this); itu juga merupakan salah satu fungsi dari binding method.