如何在焦点上打开airbnb SingleDatePicker日历

Question

我正尝试在我的组件中包含airbnb SingleDatePicker，如下所示

filename_you_want_to_check

它在输入框中显示了当前日期，如下所示，但是当我单击该字段时，什么都没有发生（日历小部件未打开）。

控制台中没有出现任何错误以找出问题所在。有人可以帮我解决此问题吗？

Answer 1

您似乎在onFocusChange函数中定位了错误的状态键。尝试将功能更改为此：

onFocusChange({ focused }) {
  this.setState({ calendarFocused: focused });
}

注意，我还从您的setState调用中删除了匿名函数。您也可以从onDateChange函数中将其删除：

onDateChange(createdAt) {
  this.setState(({ createdAt }));
}

我还注意到您正在使用startDateId无法使用的prop SingleDatePicker。 Airbnb将其用于DateRangePicker，以确定要关注的input。 input中只有一个SingleDatePicker，因此不需要prop。您可以删除该prop，而无需更改功能。

Answer 2

1-纠正此处理程序

onFocusChange = ({ focused }) => {
    this.setState(() => ({ calendarFocused: focused }));
  };

2- import 'react-dates/initialize'; //从v13.0.0开始的依赖关系

3-因为您没有使用webpack

创建一个包含require.resolve（'react-dates / lib / css / _datepicker.css'）内容的CSS文件，并将其包含在您的html部分中。

要查看实际操作，您可以签出https://github.com/majapw/react-dates-demo，它在简单的create-react-app设置的基础上添加了反应日期。