如何使用 React 触发更改事件答案

【问题标题】：How to trigger a change event using react如何使用 React 触发更改事件
【发布时间】：2017-05-11 17:39:30
【问题描述】：

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

触发 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 时，值尚未更新。

我该如何解决这个问题？

谢谢大家

【问题讨论】：

标签： javascript reactjs backbone.js

【解决方案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。阅读Lifecycle Methods 以决定哪一点。

【讨论】：