Якщо ви використовуєте ES6, ось простий приклад коду:
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;
У органах класу ES6 функції більше не потребують ключового слова "функція", і їх не потрібно розділяти комами. Ви також можете використовувати синтаксис =>, якщо хочете.
Ось приклад з динамічно створеними елементами:
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;
Зауважте, що кожен динамічно створений елемент повинен мати унікальний довідковий "ключ".
Крім того, якщо ви хочете передати фактичний об'єкт даних (а не подію) у свою функцію onClick, вам потрібно буде передати це у свою прив'язку. Наприклад:
Нова функція onClick:
getComponent(object) {
console.log(object.name);
}
Передача в об'єкт даних:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';якщо ви дійсно не розумієте, чим займаєтесь (більшість випадків, інтегруючи сторонні віджети).