Se você estiver usando ES6, aqui está um código de exemplo simples:
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;
Em corpos de classe ES6, as funções não requerem mais a palavra-chave 'function' e não precisam ser separadas por vírgulas. Você também pode usar a sintaxe => se desejar.
Aqui está um exemplo com elementos criados 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;
Observe que cada elemento criado dinamicamente deve ter uma 'chave' de referência exclusiva.
Além disso, se desejar passar o objeto de dados real (em vez do evento) para a função onClick, você precisará passá-lo para o bind. Por exemplo:
Nova função onClick:
getComponent(object) {
console.log(object.name);
}
Passando o objeto de dados:
{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 você realmente entenda o que está fazendo (na maioria das vezes, ao integrar widgets de terceiros).