개발자.. 너란놈..

React에서 onClick 이벤트를 처리하는 방법이다.

Javascript 처럼 데이터를 가져와서 하는 방법도 있지만 아래와 같이 사용 할 수도 있다.

function App() {
	const noArgs = (e) => {
		e.target.innerText = 'noname';
	};

	//인수로 원하는 텍스트를 전달해서 변경 가능 하도록 코드 개선
	const handleClick = (e, txt) => {
		e.target.innerText = txt;
	};

	return (
		<div className='wrap'>
			{/* 첫번째 버튼 클릭 시 클릭한 버튼의 글자값을 '버튼'으로 텍스트 변경 */}
			<button id='button1' onClick={noArgs}>
				button1
			</button>

			{/* 인수를 전달해야되는 함수를 이벤트 연결 할때는 wrapping 함수로 아래처럼 호출 */}
			<button onClick={(e) => handleClick(e, 'Hello')}>button2</button>
		</div>
	);
}

안녕하세요

또 한달만에 작성하는 블로그 입니다.

구글 API를 사용하여 Marker를 여러개 세팅하고 클릭하면 해당 ID를 가져와서 해당 마커의 대한 데이터를 가져오려고  

만든 소스 입니다.

다른 분들도 필요할지 모르겠지만..

map = new google.maps.Map(document.getElementById('google_map'), {        
        center: {
            lat: 37.551073,
            lng: 126.987893
        },
        zoom: 10,        
        //zoomControl: false,  줌 컨트롤
        streetViewControl: false, //로드뷰 아이콘 on/off        
        mapTypeControl : false //맵 타입 on/off (지도 , 위성)
    });

    //Marker 위치 세팅 (label , 경도 , 위도 , 아이디)
    var locations = [
        ['서울역', 37.5546788, 126.9706069,'idtest1'],
        ['서울특별시청', 37.5668260, 126.9786567, 'idtest2'],
        ['을지로입구역', 37.5660373, 126.9821930, 'idtest3'],
        ['덕수궁', 37.5655638, 126.974894, 'idtest4'],
    ];   

    //var infowindow = new google.maps.InfoWindow();
    var marker, i;

	//위치를 세팅 시켜줍니다.
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            id: locations[i][3]
        });

		//Marker를 찍었을 때 클릭 이벤트
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                alert(this.id); //아이디 가져오기

                ////중심 위치를 클릭된 마커의 위치로 변경
                //map.setCenter(this.getPosition());
              
                ////마커 클릭 시의 줌 변화
                //map.setZoom(14);

                //마커 클릭 시 label 및 데이터 보여주기
                //infowindow.setContent(locations[i][0]);
                //infowindow.open(map, marker);
            }
        })(marker, i));
    }

해당 건은 여러개의 블로그를 보고 만들었습니다.

감사합니다 :D

[2021.05.07][2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

먼저 FullCanlendar는 처음에 생성 될 때 옵션 값들을 넣어서 설정하는 것으로 달력을 html 해서 그려줍니다.

저는 Cell 클릭시 새로운 영역을 보여주기를 원했고, 설정에서는 어떻게 사용해야 되는지를 알 수 없어서 API를 뜯었습니다.

DayTableMixin.prototype.renderBgCellHtml로 api를 검색하여 Cell이 그려질 때 마다 Onclick 이벤트의 함수를 넣어서 사용 할 수 있게 하였습니다.

DayTableMixin.prototype.renderBgCellHtml = function (date, otherAttrs) {
        var t = this;
        var view = t.view;
        var isDateValid = t.dateProfile.activeUnzonedRange.containsDate(date); 
        var classes = t.getDayClasses(date);
        classes.unshift('fc-day', view.calendar.theme.getClass('widgetContent'));
        
        //※ td에 Onclick 이벤트를 주었습니다.
        return '<td class="' + classes.join(' ') + '" onclic="Test()"  ' + 
            (isDateValid ?
                ' data-date="' + date.format('YYYY-MM-DD') + '"' : 
                '') +
            (otherAttrs ?
                ' ' + otherAttrs :
                '') +
            '>' +         
			'</td>';
    };

td의 onclick 이벤트를 주어서 클릭 할 때마다 원하는 함수를 사용 할 수 있게 만들었습니다.

name이나 class로 데이터를 넣는다면 아래와 같이 이벤트를 할 수 있을 것 같습니다. (이것은 해보지는 않았습니다.)

※새롭게 생성되는 html일 경우 아래와 같이 사용 하여야 이벤트를 잡을 수 있습니다.

$(document).on("click","생성된 클래스 or 네임",function () {
	//소스 코딩
});

질문이 있으시면 댓글로 남겨주세요~