在react中动态设置react datepicker中的值

Question

我使用了react datepicker。我试图从另一个组件作为props收到的值中设置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"
/>

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

Answer 1

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

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

Answer 2

看起来event_start_date不是正确的选择类型。有 2 种可能性：

>

当"props.location.state"返回false时，event_start_date为null，这可能会导致错误。

当“道具.位置.状态”返回 true 时，event_start_date采用道具.location.state.date 的值，但它可能不是日期类型。您可以使用event_start_date.get月===“函数”来找出答案。