如何使用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 。 閱讀有關生命周期方法以決定哪一點的信息。