Javascript 如何让DateRangePicker在单击时呈现日历？

当我在webpack dev server中呈现此内容时，日历不会在单击时呈现

如果我尝试手动更改日期，则会出现错误：

DateSelection.js？f52c:25未捕获类型错误：无法读取null的属性“calendarFocus”

SingleDatePicker似乎工作得很好，但不是DateRangePicker。如何在单击时正确呈现日历

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

class DateSelection extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment(),
      endDate: moment(),
      calendarFocus: 'startDate',
    }
    this.onDatesChange = this.onDatesChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  };

  onDatesChange({ startDate, endDate }) {
    this.setState(() => ({ startDate, endDate }));
  };

  onFocusChange({ calendarFocus }) {
    this.setState(() => ({ calendarFocus }));
  };

  onSubmit(e) {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <DateRangePicker
          startDate={this.state.startDate}
          startDateId="startDate"
          endDate={this.state.endDate}
          endDateId="endDate"
          onDatesChange={this.onDatesChange}
          focusedInput={this.state.calendarFocus}
          onFocusChange={this.onFocusChange}
        />
        <br/>
        <input type="submit" value="Submit" />
      </form>
    );
  }
};

ReactDOM.render((
  <DateSelection/>
), document.getElementById('root'));

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“力矩”中导入力矩；
从“反应日期”导入{DateRangePicker}；
导入“反应日期/初始化”；
导入'react dates/lib/css/_datepicker.css'；
类DateSelection扩展组件{
建造师（道具）{
超级（道具）；
此.state={
起始日期：力矩（），
endDate:moment（），
calendarFocus:'startDate'，
}
this.onDatesChange=this.onDatesChange.bind（this）；
this.onFocusChange=this.onFocusChange.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
};
onDatesChange（{startDate，endDate}）{
this.setState（（）=>（{startDate，endDate}））；
};
onFocusChange（{calendarFocus}）{
this.setState（（）=>（{calendarFocus}））；
};
提交（e）{
e、 预防默认值（）；
console.log（this.state）；
};
render（）{
返回(


);
}
};
ReactDOM.render((
)，document.getElementById（'root'）；

其他详情：

• 反应16.2.0
• 反应日期16.3.5
• 网页3.10.0
• 网页包开发服务器2.11.1

另外，顺便说一句，我似乎找不到当前日期的文档。很多地方都有我的链接，但似乎缺少一些信息。例如，此处的“说明”列为空

---

尝试在构造函数中将

calendarFocus

设置为

null

改变

onFocusChange({ calendarFocus }) {
  this.setState(() => ({ calendarFocus }));
};

到

onFocusChange(calendarFocus) {
  this.setState(() => ({ calendarFocus }));
};