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>
)}
)}
event.currentTarget.style.backgroundColor = '#ccc';수행중인 작업을 실제로 이해하지 않는 한 (대부분의 경우 타사 위젯을 통합하는 동안) .