Event
1. Handling Onclick Pada Button
Untuk melakukan handling event menggunakan react, caranya mirip seperti menggunakan javascript biasa, berikut contoh penerapan handling event pada component Button
saat event OnClick
terjadi
1.2. Membuat Component Button
// Button.js
import React, { Component } from 'react'
class Button extends Component {
render() {
return <button>Klik Saya</button>
}
}
export default Button
1.2. Membuat Method showMessage
// Button.js
import React, { Component } from 'react'
class Button extends Component {
// membuat method show message
showMessage() {
alert('hello world')
}
render() {
return <button>Klik Saya</button>
}
}
export default Button
1.3. Menjalankan Method Ketika OnClick
// Button.js
import React, { Component } from 'react'
class Button extends Component {
showMessage() {
alert('hello world')
}
render() {
// menjalankan method showMessage ketika onClick
return <button onClick={showMessage}>Klik Saya</button>
}
}
export default Button
2. Menggunakan this
Saat Handling Event
this
Saat Handling Event2.1. Permasalahan
Disini kita akan mencoba merubah pesan yang ditampilkan pada method showMessage
menggunakan props
// Button.js
import React, { Component } from 'react'
class Button extends Component {
// menggunakan props untuk merubah pesan
showMessage() {
alert(this.props.message)
}
render() {
return <button onClick={showMessage}>Klik Saya</button>
}
}
export default Button
Yang terjadi adalah saat component Button
kita klik, maka akan terjadi error yang memberitahu bahwa this undefined
, ini artinya dalam method showMessage
kita tidak dapat mengakses this
2.2. Solusi
Agar kita dapat mengakses this
dalam method showMessage
, maka kita perlu merubah deklarasi method showMessage
menggunakan arrow function
// Button.js
import React, { Component } from 'react'
class Button extends Component {
// menggunakan arrow function agar dapat mengakses this
showMessage = () => {
alert(this.props.message)
}
render() {
return <button onClick={showMessage}>Klik Saya</button>
}
}
export default Button
Last updated
Was this helpful?