如何正确使用 react-day-picker-input 中的 hideDayPicker() 公共函数？

Question

我试图通过再次单击 react-day-picker-input 元素来隐藏我的日历（默认情况下单击它时它会打开）。为此，我有一个状态，当您单击元素时会记录 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-app 运行公共功能。您需要做的就是从您的 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 目录并在 ../node_modules/react-day-picker/lib/src/DayPickerInput.js 中找到 DayPickerInput.js
2. 注释掉（或删除）“handleInputFocus”和“handleInputClick”下的 this.showDayPicker()。
3. 在 this.props.inputProps.onClick(e) 下添加了条件（第 349 行） 注意：不需要更新 showOverlay，因为 hideDayPicker() 和 showDayPicker() 已经这样做了。