Question

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

在触发onChange事件时更新模型。

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

我正在使用react的datepicker组件在此模型中添加日期字段，但是当我选择日期时，此骨干函数不会触发onChange事件。这是组件：https://github.com/Hacker0x01/react-datepicker

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

<style>
body {
  font-family: 'Nunito', sans-serif;
  font-weight: 100;
  font-size: 1em;
  color: #faf3bc;
  background-color: #0976B2;
}

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
  margin-right: 1.25%;
  float: left;
  display: block;
}
.last {margin-right:0; }

.container{
  clear:both;
  width: 90%;
  max-width: 800px;
  padding: 0% 0;
  margin: auto;
}
img {
  max-width: 100%;
}
h1 {
  font-size: 2.750em;
  line-height: 1.25em;
  font-weight: 100;
  letter-spacing: -2.75px;
  color: #ffffff;
}

a:link {color:#b4c34f; text-decoration:none;}      /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;}  /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;}  /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;}  /* selected link */

a.selected {color:#ffffff;}  /* selected link */

ul {
  list-style-type:none;
}

.form-input {
  height: 30px;
}
   @media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
  width: 100%;
}}
</style>

<div class="grid_3">
  <img src="1.jpg">
</div>
<div class="grid_3 last">
  <img src="1.jpg">
</div>
<div class="grid_3">
  <img src="1.jpg">
</div>
<div class="grid_3 last">
  <img src="1.jpg">
</div>

这很好用，但是当我在datepicker中选择一个新日期时，它会将旧值传递给模型。当触发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。阅读Lifecycle Methods以确定哪一点。

如何使用react触发更改事件

1 个答案: