Как правильно добавить событие onChange в элемент HTML в React?

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 с добавленным тегом select?

Answer 1

Вам нужно будет реализовать прослушиватель событий в функции componentDidMount() вашего компонента. componentDidMount будет вызываться только один раз, когда представление отображается в первый раз.

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

Надеюсь это поможет.