Jika Anda menggunakan ES6, berikut beberapa contoh kode sederhana:
import React from 'wherever_react_is';
class TestApp extends React.Component {
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}
export default TestApp;
Dalam badan kelas ES6, fungsi tidak lagi memerlukan kata kunci 'function' dan tidak perlu dipisahkan dengan koma. Anda juga dapat menggunakan sintaks => juga jika Anda mau.
Berikut adalah contoh dengan elemen yang dibuat secara dinamis:
import React from 'wherever_react_is';
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{name: 'Name 1', id: 123},
{name: 'Name 2', id: 456}
]
}
}
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
<div>
<ul>
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this)}>{d.name}</li>
)}
)}
</ul>
</div>
);
}
}
export default TestApp;
Perhatikan bahwa setiap elemen yang dibuat secara dinamis harus memiliki 'kunci' referensi unik.
Selain itu, jika Anda ingin meneruskan objek data aktual (bukan peristiwa) ke dalam fungsi onClick, Anda harus meneruskannya ke bind Anda. Sebagai contoh:
Fungsi onClick baru:
getComponent(object) {
console.log(object.name);
}
Meneruskan objek data:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';
kecuali jika Anda benar-benar memahami apa yang Anda lakukan (sebagian besar waktu, saat mengintegrasikan widget pihak ketiga).