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

【问题标题】：What is correct way to add onChange event inside html element in React?在 React 的 html 元素中添加 onChange 事件的正确方法是什么？
【发布时间】：2017-12-11 08:36:25
【问题描述】：

我正在为日历功能使用全日历库。它有一个回调函数来改变日历的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事件？

【问题讨论】：

标签： jquery ruby-on-rails reactjs fullcalendar react-rails

【解决方案1】：

您需要在组件的 componentDidMount() 函数中实现事件监听器。 componentDidMount 只会在第一次渲染视图时调用一次。

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

希望这会有所帮助。

【讨论】：