javascript - 如何使用react触发change事件

Question

目前我的 Backbone 有这个功能。

触发 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组件在此模型中添加日期字段，但是当我选择日期时，backbone的这个功能不会触发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 风格 - 将回调函数作为 prop 传递给您的组件并执行它 handleChange 而不是触发 input 更改。像这样:

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

  this.prop.onChangeCallback(date);
}

* 您可以在组件生命周期的特定点执行onChangeCallback。阅读 Lifecycle Methods来决定哪一点。