如何使用 React 触发更改事件

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;
    });

我正在使用反应的日期选择器组件在此模型中添加日期字段，但是 backbone 的此功能不会在我 select 日期时触发 onChange 事件。这是组件：https://github.com/Hacker0x01/react-datepicker

在我的组件中，我手动触发了 'change' 事件

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

这工作正常，但是当我在日期选择器中 select 一个新日期时，它会将旧值传递给模型。当触发 onchange 时，该值尚未更新。

我该如何解决这个问题？

谢谢大家

Answer 1

这可能是因为您在 setState 重新渲染组件之前触发了事件，因此您得到了 Dom 的旧值。

解决此问题的两个选项：

1.You可以给setState传一个回调函数作为第二个参数，像这样：

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

回调函数将在 setState 完成并重新渲染组件后执行。（阅读更多信息：http://reactjs.cn/react/docs/component-api.html#setstate）。

2.And 更多 React-ish- 将回调函数作为 prop 传递给您的组件并执行它 handleChange 而不是触发 input 更改。像这样：

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

  this.prop.onChangeCallback(date);
}

* 您可以在组件生命周期的特定时间点执行 onChangeCallback。阅读有关 Lifecycle Methods 的内容以决定哪一点。

如何使用 React 触发更改事件

How to trigger a change event using react

javascript

backbone.js

reactjs