如何在焦点上打开airbnb SingleDatePicker日历
如何在焦点上打开airbnb SingleDatePicker日历
提问于 2018-11-30 20:12:21
我尝试在我的组件中包含airbnb SingleDatePicker，如下所示
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { SingleDatePicker } from "react-dates";
export default class ExpenseForm extends React.Component {
constructor(props) {
super(props);
this.state = {
createdAt: moment(),
calendarFocused: false
};
this.onDateChange = this.onDateChange.bind(this);
this.onFocusChange = this.onFocusChange.bind(this);
}
onDateChange(createdAt) {
this.setState(() => ({ createdAt }));
}
onFocusChange({ focused }) {
this.setState(() => ({
focused
}));
}
render() {
return (
<div>
<SingleDatePicker
date={this.state.createdAt}
startDateId="MyDatePicker"
onDateChange={this.onDateChange}
focused={this.state.calendarFocused}
onFocusChange={this.onFocusChange}
id="SDP"
/>
</div>
);
}
}它在输入框内显示当前日期，如下所示，但当我单击该字段时，什么也没有发生(Calendar小部件没有打开)。
我在控制台中没有得到任何错误，以找出问题所在。有人能帮我解决这个问题吗？
回答 2
Stack Overflow用户
发布于 2018-11-30 20:35:28
看起来你在你的onFocusChange函数中使用了错误的状态键。尝试将函数更改为：
onFocusChange({ focused }) {
this.setState({ calendarFocused: focused });
}请注意，我还从setState调用内部删除了匿名函数。您也可以将其从onDateChange函数中删除：
onDateChange(createdAt) {
this.setState(({ createdAt }));
}我还注意到您正在使用SingleDatePicker上不可用的startDateId prop。Airbnb利用这一点为DateRangePicker决定关注哪个input。SingleDatePicker中只有一个input，因此它不需要该prop。您可以在不对功能进行任何更改的情况下删除该prop。
Stack Overflow用户
发布于 2019-08-05 03:03:48
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，它在简单的创建-反应-应用程序设置的基础上添加了反应日期。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53557362
复制相关文章
相似问题