What is correct way to add onChange event inside html element in React?

Question

I am using fullcalendar library for the calendar feature. It has one of the callback function to change the viewRender of the calendar. I am modifying it to change the title to dropdown select by appending the html element.

   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>"
    );
  },

How to bind handleChange event on the above appended select tag?

score 0 · Answer 1 · answered Dec 11 '17 at 08:54

You will need to implement the event listener in componentDidMount() function in your component. componentDidMount will be called only once when the view is rendered for the first time.

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

Hope this helps.

What is correct way to add onChange event inside html element in React?

1 Answers1