Si vous utilisez ES6, voici un exemple de code simple:
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;
Dans les corps de classe ES6, les fonctions n'ont plus besoin du mot-clé 'function' et elles n'ont pas besoin d'être séparées par des virgules. Vous pouvez également utiliser la syntaxe => si vous le souhaitez.
Voici un exemple avec des éléments créés dynamiquement:
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;
Notez que chaque élément créé dynamiquement doit avoir une «clé» de référence unique.
De plus, si vous souhaitez passer l'objet de données réel (plutôt que l'événement) dans votre fonction onClick, vous devrez le transmettre dans votre liaison. Par exemple:
Nouvelle fonction onClick:
getComponent(object) {
console.log(object.name);
}
Passer l'objet de données:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';si vous ne comprenez pas vraiment ce que vous faites (la plupart du temps, tout en intégrant des widgets tiers).