如何正确使用来自react日期选择器输入的hideDayPicker()公共函数

Question

我试图通过再次单击react day picker输入元素来隐藏我的日历(默认情况下，单击它时会打开)。为此，当您单击元素时，我有一个记录true或false的状态。问题是，当我再次点击隐藏它时，它会给我以下错误：

TypeError:calendarNode.hideDayPicker不是函数

我尝试过使用showOverlay和hideDayPicker。我看到了一个可以使用按钮的代码，但当您将onClick应用于DayPickerInput组件时，却无法实现结果(见下文)。https://codesandbox.io/s/oqm3p4j9rz

这是我的代码(摘要)：

onKeyPress = (event) => {
event.preventDefault();
}
dateRestriction = () => {
const date = new Date();
const nutrition_offset = date.getTimezoneOffset() + 240;
date.setMinutes(date.getMinutes() + nutrition_offset);
const year = date.getFullYear();
const month = date.getMonth() + 1;
let day = date.getDate();
if ((date.getDay() === 4) || (date.getDay() === 5)) {
if (date.getDate() < 5) {
day = ('0' + (date.getDate() + 5));
} else {
day = date.getDate() + 5;
}
}
if (date.getDay() === 6) {
if (date.getDate() < 6) {
day = ('0' + (date.getDate() + 4));
} else {
day = date.getDate() + 4;
}
}
if ((date.getDay() === 0) || (date.getDay() === 1) || (date.getDay() === 2) || (date.getDay() === 3)) {
if (date.getDate() < 7) {
day = ('0' + (date.getDate() + 3));
} else {
day = date.getDate() + 3;
}
}
let dateRestricted = this.parseDate_(year + '-' + month + '-' + day);
this.setState({
noDay: dateRestricted,
showCalendar: true
});
this.handleDayPickerInputHide();
}
handleDayPickerInputHide = () => {
const calendarNode = document.getElementsByName("date");
if (this.state.showCalendar === false) {
return;
} else {
calendarNode.hideDayPicker();
this.setState = {
showCalendar: false
}
}
}
render () {
const { selectedDay } = this.state;
return (
<div>
<DateObject
inputProps={
{className: 'dib nav pl2 pointer br3 shadow-1 dropdownButtonDate removeCursor bg-transparent pv1 mt2 typefaceFont dropdownText',
onKeyDown: this.onKeyPress,
onClick: this.dateRestriction,
name: 'date',
required: "required"}
}
value={selectedDay}
onDayChange={this.handleDayChange}
dayPickerProps={{
selectedDays: selectedDay,
disabledDays:
[
new Date(2019, 0, 1),
new Date(2019, 11, 24),
new Date(2019, 11, 25),
new Date(2019, 11, 31),
{
daysOfWeek: [0, 6],
},
{
before: new Date(this.state.noDay)
}]
}}
/>
</div>
)
}

预期：1.日历最初是隐藏的(默认行为)2.单击显示日历(默认行为)3.再次单击以隐藏日历(需要)4.单击外部也会隐藏日历(默认行为)5.选择日期也会隐藏日历(默认行为)

实际结果：1.日历最初是隐藏的(默认行为)2.单击显示日历(默认行为)3.再次单击以隐藏日历(错误)4.单击外部也会隐藏日历(默认行为)5.选择日期也会隐藏日历(默认行为)

Answer 1

把它拼出来！！！

无需更新状态、使用DOM或尝试从react应用程序运行公共函数。您所需要做的就是更新node_modules中的react day picker。

伙计。。。这需要配合他们的下一个版本的react day picker。。。看看吧！

{
key: 'handleInputClick',
value: function handleInputClick(e) {
//this.showDayPicker();
if (this.props.inputProps.onClick) {
e.persist();
this.props.inputProps.onClick(e);
if (this.state.showOverlay === false) {
this.showDayPicker();
}
if (this.state.showOverlay === true) {
this.hideDayPicker();
}
}
}
}, {
key: 'handleInputFocus',
value: function handleInputFocus(e) {
var _this5 = this;
//this.showDayPicker();
// Set `overlayHasFocus` after a timeout so the overlay can be hidden when
// the input is blurred
this.inputFocusTimeout = setTimeout(function () {
_this5.overlayHasFocus = false;
}, 2);
if (this.props.inputProps.onFocus) {
e.persist();
this.props.inputProps.onFocus(e);
}
}

1. 导航到node_modules目录，并在..中找到DayPickerInput.js/node_modules/areact day picker/lib/src/DayPickerInput.js
2. 在"handleInputFocus"one_answers"handleInputClick"下注释掉(或删除)this.showDayPicker()
3. 在this.props.inputProps.onClick(e)下面添加了条件(第349行)注意：没有必要更新showOverlay，因为hideDayPicker()和showDayPicker(()已经更新了