如果您使用的是 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 类主体中，函数不再需要 'function' 关键字，也不需要用逗号分隔。如果您愿意，也可以使用 => 语法。
这是一个动态创建元素的示例：
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>
)}
)}