在 react-datepicker 中动态设置值答案

【问题标题】：set a value in react-datepicker dynamically in react在 react-datepicker 中动态设置值
【发布时间】：2020-11-08 02:31:42
【问题描述】：

我使用了 react-datepicker。我尝试根据我从另一个组件作为道具收到的值设置 react-datepicker 的值，但要么它没有显示该值，要么它通过说“错误的时间格式”显示一个空白页。

日期选择器代码：

this.state = {
  venue_id: props.location.state ? props.location.state.venue_id : null,
  event_start_date: props.location.state ? props.location.state.date : null,
}

<DatePicker
  selected={this.state.event_start_date}
  onChange={this.handleStartDate}
  minDate={new Date()}
  dateFormat="MM/dd/yyyy"
/>

我检查了控制台，发现日期选择器组件成功接收了道具，但我仍然无法设置值。

【问题讨论】：

你的event_start_date是什么类型的？
日期类型。我用 new Date() 初始化它。
我也试过改变'MM/ddd/yyyy'中event_start_date的格式，但也没用。
您需要将日期对象传递给selected。另外，在您的情况下看到this.state 的用法，我感到有些不安。您可以尝试使用其他变量名吗？这种类型的使用应该只限制在组件构造函数中。

标签： javascript reactjs typescript date

【解决方案1】：

首先，您需要将 Datepicker 的选定道具绑定到 State 并在从数据库读取时更改状态。如果你改变日期格式，你应该把它解析成JS日期来显示。

//Date.parse(pass date from db)
setbirth(Date.parse(data['userData']['birthday']))

【讨论】：

【解决方案2】：

看起来 event_start_date 的类型不适合选择。有两种可能：

当“props.location.state”返回false时，event_start_date为null，可能会报错。
当 "props.location.state" 返回 true 时，event_start_date 取 props.location.state.date 的值，但它可能不是 Date 类型。您可以使用typeof event_start_date.getMonth === 'function' 查找。

【讨论】：

你是对的 event_start_date 是字符串类型。我将其更改为日期对象，一切正常。谢谢。