React에서 html 요소 내에 onChange 이벤트를 추가하는 올바른 방법은 무엇입니까?

Question

캘린더 기능으로 fullcalendar 라이브러리를 사용하고 있습니다. 캘린더의 viewRender를 변경하는 콜백 함수 중 하나가 있습니다. html 요소를 추가하여 제목을 드롭 다운으로 변경하도록 수정 중입니다.

viewRender: function(view) { 
    let title = view.title; 

    $("#calendar").find('.fc-toolbar .fc-left > h2').empty().append(
     "<div className='Select Select-month'>" + 
     "<select id='months-tab' className='Select-input' onChange={this.handleChange.bind(this)}>" + 
      "<option data-month='0'>January</option>" + 
      "<option data-month='1'>February</option>" + 
      "<option data-month='2'>March</option>" + 
      "<option data-month='3'>April</option>" + 
      "<option data-month='4'>May</option>" + 
      "<option data-month='5'>June</option>" + 
      "<option data-month='6'>July</option>" + 
      "<option data-month='7'>August</option>" + 
      "<option data-month='8'>September</option>" + 
      "<option data-month='9'>October</option>" + 
      "<option data-month='10'>November</option>" + 
      "<option data-month='11'>December</option>" + 
     "</select>" + 
     "</div>" 
    ); 
    }, 

위의 추가 선택 태그에 handleChange 이벤트를 바인딩하는 방법은 무엇입니까?

Answer 1

구성 요소의 componentDidMount() 함수에 이벤트 리스너를 구현해야합니다. componentDidMount는 뷰가 처음 렌더링 될 때 한 번만 호출됩니다.

componentDidMount() { 
    $('#months-tab').change(function() { 
     //Logic to handle change event. 
    }); 
} 

희망이 도움이됩니다.