javascript - ReactJS:为什么 Material-UI <DatePicker/> 的属性默认日期不起作用？

Question

我正在使用 <DatePicker/>来自 Material-UI ( http://www.material-ui.com/#/components/date-picker ) 并尝试设置属性 defaultDate到我电脑上的当前日期，但它没有显示任何内容。

这是错误还是我遗漏了什么？

代码如下:

  constructor(props) {
    super(props)

    //Followed the example from the link provided: So hoping to display today's date on my computer, which is 2016-09-29

    const dateToday = new Date();
    dateToday.setFullYear(dateToday.getFullYear())
    dateToday.setHours(0, 0, 0, 0)

    this.state = {
      controlledDate: null,
      dateToday: dateToday,
    }
  }

  handleDateChange = (event, date) => {
    this.setState({
      controlledDate: date,
    });
  };

render() {
return (
  <DatePicker
      autoOk={true}
      defaultDate={this.state.dateToday}
      hintStyle={styles.hintLabel}
      value={this.state.controlledDate}
      onChange={this.handleDateChange}
    />
 )
}

Answer 1

浏览 MUI 的 DatePicker 属性文档并阅读 defaultDate Prop 的描述，其中说:

This is the initial date value of the component. If either value or valueLink is provided they will override this prop with value taking precedence.

分析你的组件的代码，你通过传递给它 this.state.controlledDate 来设置 Prop value ，它最初是 null 从而采取优先于您尝试设置的 dafaultDate 属性。

constructor(props) {
  super(props);

  const dateYesterday = new Date();
  dateYesterday.setDate(dateYesterday.getDate() - 1);

  this.state = {
    controlledDate: null,
    dateYesterday: dateYesterday
  };
};

handleDateChange = (event, date) => {
  this.setState({
    controlledDate: date,
  });
};

render () {
  return (
    <DatePicker
      autoOk={true}
      defaultDate={this.state.dateYesterday}
      // value={this.state.controlledDate}
      onChange={this.handleDateChange}
    />
  );
}

在这个例子中，我试图将初始日期设置为昨天的日期，但我注释了 value 属性以使其工作，否则 value 属性将采用优先于 defaultDate Prop 我在这里设置昨天的日期，所以它不会工作。我猜你真的不需要在这里设置 value 属性。