ReactJS + Material-UI：如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值？答案

【问题标题】：ReactJS + Material-UI: How to set current date as default value using Material-UI's <DatePicker>?ReactJS + Material-UI：如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值？
【发布时间】：2017-04-21 15:36:35
【问题描述】：

目前我正在使用 ReactJS + Material-UI 的 <DatePicker> (http://www.material-ui.com/#/components/date-picker)，并希望将今天的当前日期设置为 <DatePicker> 的默认/初始值。我该怎么做呢？

当前设置：

<DatePicker
  autoOk={true}
  hintText="Select Date"
  value={inputs.dateValue}
  onChange={this.handleDatechange}
/>

【问题讨论】：

标签： reactjs datepicker redux material-ui

【解决方案1】：

你可以做这样的事情

this.state={
    date : new Date()
}

handleDatechange(event,date){
    this.setState({date: date})
}

<DatePicker
  autoOk={true}
  hintText="Select Date"
  value={this.state.date}
  onChange={this.handleDatechange}
/>

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些即时帮助。一个正确的解释would greatly improve 其教育价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有类似但不相同的问题的读者更有用。请edit您的答案添加解释，并说明适用的限制和假设。

【解决方案2】：

DatePickers 默认行为是从今天的日期开始。不会出现这种情况的唯一原因是，如果您传入 defaultDate 道具或具有不同日期的 value 道具。

在您的情况下，您将值作为 input.dateValue 传递，因此这将是初始值。您只需要确保inputs.dateValue的值设置为今天的日期，例如，

inputs.dateValue = new Date();

【讨论】：

【解决方案3】：

如果使用Redux-Form，和我一样，可以这样设置默认

在容器中设置初始值：

export default reduxForm({
    form: 'DateForm', 
    initialValues: { use_end_date: new Date() }
})(DateFormComponent);

对于组件中的字段：

<Field
  name="use_end_date"
  component={ReduxMaterialDatePicker}
  margin="none"
/>

【讨论】：