在 antd 的 DatePicker 中处理手动编辑日期时间答案

【问题标题】：Handle manual edit of date time in DatePicker of antd在 antd 的 DatePicker 中处理手动编辑日期时间
【发布时间】：2017-09-25 04:00:52
【问题描述】：

我正在使用来自 antd 的DatePicker。

<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/D/YYYY HH:mm"
      defaultValue={this.getStartValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="Start"
      allowClear={false}
      onOk={this.onStartTimeChange}
    />
</LocaleProvider>
<LocaleProvider locale={enUS}>
    <DatePicker
      format="MM/DD/YYYY HH:mm"
      defaultValue={this.getEndValue()}
      showTime={{format: 'HH:mm'}}
      placeholder="End"
      allowClear={false}
      onOk={this.onEndTimeChange}
    />
</LocaleProvider>

我正在显示状态中的值，并且 onOK 正在使用新值更改状态。现在面临的问题是用户手动编辑时间。

有没有办法

防止用户更改时间手动编辑输入字段？
或者用编辑后的值改变状态？

onChange 是唯一的方法，因为 onChnage 会在几乎每次用户点击时多次更改我的状态。如果 onChange 是推荐的方式，那么我们可以避免 ok 按钮本身吗？

【问题讨论】：

标签： reactjs react-redux antd

【解决方案1】：

在网上搜索并尝试后。

我们可以使用 onChange 来处理所有事情。

<DatePicker
  format='MM/DD/YYYY HH:mm'
  defaultValue={this.getFromValue()}
  showTime={{format: 'HH:mm'}}
  placeholder="Start"
  allowClear={false}
  showToday={false}
  disabledDate={this.disabledFromDate}
  onChange={this.onStartTimeChange}
/>

【讨论】：