React JS에서 이벤트를 처리하여 창 열기
React JS에서 작업하고 이미지나 버튼을 클릭하는 경우와 같은 특정 이벤트 후에 새 창을 열고 싶다면 정확한 장소에 오셨습니다. 이 블로그 포스트에서는 이 이벤트를 효과적으로 처리하는 방법을 안내합니다. 이해를 돕기 위해 단계별 예제를 제공합니다.
단계 1: 이벤트 설정하기
새 창을 열리게 하는 이벤트를 설정하는 첫 번째 단계입니다. 렌더링된 코드에 이미지가 있다고 가정하고, 이미지를 클릭할 때 새 창을 열고 싶습니다:
render() {
return (
<div>
<img src="/static/img/fshare.png" onClick={this.fbShare} />
<Button onClick={this.hide}>Close</Button>
</div>
);
}
위의 예제 코드에서 <img> 태그에 이미지 소스 /static/img/fshare.png가 있습니다. 클릭할 때 fbShare 함수를 호출하는 onClick={this.fbShare} 이벤트가 추가되었습니다.
단계 2: fbShare 함수 구현하기
이제 fbShare 함수를 구현해 보겠습니다. 이 함수는 페이스북 공유를 위해 새 창을 열게 됩니다:
fbShare: function(event) {
window.open('https://www.facebook.com/dialog/feed?app_id=xxxxxxxxe='sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)");
}
위의 코드에서는 window.open 함수를 사용하여 페이스북 공유 URL이 포함된 새 창을 엽니다. https://www.facebook.com/dialog/feed?app_id=xxxxxxxxe='sharer'를 페이스북에 공유하려는 실제 URL로 대체할 수 있습니다.
단계 3: 모두 함께 구축하기
이벤트가 설정되고 함수가 구현되었으므로 이제 모든 것을 함께 넣을 수 있습니다. 완성된 코드 예제는 다음과 같습니다:
var Example = React.createClass({
fbShare: function() {
window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Fb Share&p[summary]=Facebook share popup&p[url]=javascript:fbShare("http://jsfiddle.net/stichoza/EYxTJ/")&p[images][0]="http://goo.gl/dS52U"', 'sharer', 'toolbar=0,status=0,width=548,height=325');
},
render: function() {
return (
<div>
<img src="http://pasadenainstitute.com/fb-shareTransp122x42.png" onClick={this.fbShare} />
</div>
);
}
});
ReactDOM.render(
<Example />,
document.getElementById('container')
);
결론
축하합니다! 이제 React JS에서 이벤트를 처리하여 새 창을 열 수 있는 방법을 알게 되었습니다. 이 블로그 포스트에서 제공하는 단계와 예제를 따라하면 React 애플리케이션에 이 기능을 쉽게 통합할 수 있습니다. 특정 요구사항에 따라 URL 및 기타 매개변수를 사용자 정의해야 합니다.
즐거운 코딩하세요!
