Si está utilizando ES6, aquí hay un código de ejemplo 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;
En los cuerpos de clase de ES6, las funciones ya no requieren la palabra clave 'función' y no necesitan estar separadas por comas. También puede usar la sintaxis => si lo desea.
Aquí tienes un ejemplo con elementos creados dinámicamente:
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;
Tenga en cuenta que cada elemento creado dinámicamente debe tener una 'clave' de referencia única.
Además, si desea pasar el objeto de datos real (en lugar del evento) a su función onClick, deberá pasarlo a su enlace. Por ejemplo:
Nueva función onClick:
getComponent(object) {
console.log(object.name);
}
Pasando el objeto de datos:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';menos que realmente comprenda lo que está haciendo (la mayoría de las veces, mientras integra widgets de terceros).