Se stai usando ES6, ecco un semplice codice di esempio:
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;
Nei corpi delle classi ES6, le funzioni non richiedono più la parola chiave "function" e non devono essere separate da virgole. Puoi anche usare la sintassi => se lo desideri.
Ecco un esempio con elementi creati dinamicamente:
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;
Nota che ogni elemento creato dinamicamente dovrebbe avere una "chiave" di riferimento univoca.
Inoltre, se desideri passare l'oggetto dati effettivo (piuttosto che l'evento) nella tua funzione onClick, dovrai passarlo al tuo bind. Per esempio:
Nuova funzione onClick:
getComponent(object) {
console.log(object.name);
}
Passaggio nell'oggetto dati:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';meno che tu non capisca veramente cosa stai facendo (il più delle volte, integrando widget di terze parti).