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

如何在上面附加的select标签上绑定handleChange事件？

Answer 1

您需要在组件的componentDidMount（）函数中实现事件侦听器。第一次呈现视图时，componentDidMount只会被调用一次。

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

希望这有帮助。

在React中的html元素中添加onChange事件的正确方法是什么？

1 个答案: