Nếu bạn đang sử dụng ES6, đây là một số mã ví dụ đơn giản:
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;
Trong các phần thân của lớp ES6, các hàm không còn yêu cầu từ khóa 'function' và chúng không cần được phân tách bằng dấu phẩy. Bạn cũng có thể sử dụng cú pháp => nếu muốn.
Dưới đây là một ví dụ với các phần tử được tạo động:
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;
Lưu ý rằng mỗi phần tử được tạo động phải có một 'khóa' tham chiếu duy nhất.
Hơn nữa, nếu bạn muốn chuyển đối tượng dữ liệu thực tế (thay vì sự kiện) vào hàm onClick của mình, bạn sẽ cần chuyển đối tượng đó vào ràng buộc của mình. Ví dụ:
Chức năng onClick mới:
getComponent(object) {
console.log(object.name);
}
Truyền vào đối tượng dữ liệu:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';trừ khi bạn thực sự hiểu những gì bạn đang làm (hầu hết các trường hợp, trong khi tích hợp các tiện ích của bên thứ ba).