在React中，HTML元素中添加Onchange事件的正确方法

Question

我正在为日历功能使用fullcalendar库。它具有更改日历的视图的回调函数之一。我正在修改它以通过附加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>"
    );
  },

如何绑定上面附加的处理手机事件选择标签？

Answer 1

您需要在组件中的componentdidmount（）函数中实现事件侦听器。首次呈现视图时，只有一次调用ComponentDidMount一次。

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

希望这会有所帮助。