如何使用react触发更改事件

Question

目前我在主干中有这个功能。

它会在触发onChange事件时更新模型。

bindElementToAttribute: function(el, name, eventType) {
    var that = this;
    eventType = typeof(eventType) != 'undefined' ? eventType : "change";
    $(el).on(eventType, function() {
      var obj = {};
      obj[name] = $(el).val();
      that.model.set(obj, {silent: true});
      return true;
    });

我正在使用react的datepicker组件在这个模型中添加一个日期字段，但是主干的这个函数在我选择日期时不会触发onChange事件。这是一个组件：https://github.com/Hacker0x01/react-datepicker

在我的组件中，我手动触发了“更改”事件

handleChange(date) {
    this.setState({
      startDate: date
    });
    $('input[name=release_date]').trigger('change')
  }

这很好，但当我在datepicker中选择新日期时，它会将旧值传递给模型。触发onchange时，该值尚未更新。

我怎样才能解决这个问题？

谢谢大家

Answer 1

这可能是因为在组件作为setState的结果重新呈现之前触发了事件，因此获得了Dom的旧值。

两个选项来解决这个问题：

1.您可以将setState作为第二个参数传递回调函数，如下所示：

this.setState({
  startDate: date
}, function(){$('input[name=release_date]').trigger('change')});

一旦setState完成并重新呈现组件，将执行回调函数。（请在此阅读更多信息：http://reactjs.cn/react/docs/component-api.html#setstate).

2.和更多响应-将回调函数作为prop传递给组件，并执行它handleChange，而不是触发input更改。这样地：

handleChange(date) {
  this.setState({
    startDate: date
  });

  this.prop.onChangeCallback(date);
}

*您可以在组件生命周期的特定点执行onChangeCallback。阅读有关生命周期方法的信息，以确定哪一点。