如何使用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')
  }

这工作正常，但是当我在日期选择器中选择新日期时，它将旧值传递给模型。 触发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，更多的React-ish-将回调函数作为prop传递给组件，并执行handleChange而不是触发input更改。 像这样：

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

  this.prop.onChangeCallback(date);
}

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