Как правильно использовать публичную функцию hideDayPicker () из response-day-picker-input?

Question

Я пытаюсь скрыть свой календарь, снова щелкнув по элементуact-day-picker-input (он откроется, когда вы щелкнете по умолчанию).Для этого у меня есть состояние, которое записывает истину или ложь, когда вы нажимаете элемент.Проблема в том, что когда я нажимаю снова, чтобы скрыть его, выдается следующее сообщение об ошибке:

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 или пытаться запустить публичную функцию из вашего реактивного приложения.Все, что вам нужно сделать, это обновить средство выбора дня реакции из ваших узлов node_modules.

Человек ... Это должно быть связано с их следующей версией средства выбора дня реакции ... Проверьте это!

{
    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/react-day-picker/lib/src/DayPickerInput.js
2. Закомментировать (или удалить)this.showDayPicker () для 'handleInputFocus' и 'handleInputClick'.
3. Добавлено условие ниже this.props.inputProps.onClick (e) (строка 349). Примечание. Нет необходимости обновлять showOverlay как hideDayPicker () и showDayPicker () уже делают это.