Javascript 需要在react js中实现datepicker显示和消失功能

需要在react js中实现datepicker显示和消失功能请帮助我在我的最后一个问题中实现这一点typescript在这段代码中被提到它完全是关于react的请帮助我显示和消失功能

我正在处理该文件，以实现日期选择器显示/消失功能 如果我单击输入字段，下拉列表将显示并保持可见，而当我单击文本输入或选择日期时，下拉列表将短暂显示 Widget.js**

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { find as _find } from 'lodash';
import { Dropdown } from './dropdown/Dropdown';
import { DateField } from './date-field/DateField';
import { MonthNavigator } from './month-navigator/MonthNavigator';
import './Widget.scss';

const MIN_YEAR = 1900;
const MAX_YEAR = moment().year() + 5;

export class Widget extends Component {

  constructor(props) {
    super(props);
    const date = props.date || moment();
    this.state = {
      date,
      day: date.date(),
      month: date.month(),
      year: date.year(),
      selectedDay: 10,
      selectedMonth: 2,
      selectedYear: 2019,
      dropdownHeight: 200,
    };
  }

  // createDay({ dayNumber, startDay }) {
  //   const { day, month, year, date, selectedDay } = this.state;

  //   let state = '';
  //   if (month === date.month() && year === date.year()) {
  //     state = dayNumber === selectedDay
  //       ? 'Widget-day--selected'
  //       : (dayNumber === day
  //         ? 'Widget-day--current'
  //         : ''
  //       );
  //   }
  //   const style = {};
  //   if (startDay) {
  //     style = { ...style, gridColumnStart: startDay};
  //     startDay = 0;
  //   }
  //   return (
  //     <div className={`Widget-day ${state}`} onClick={() => this.changeDay({ day: dayNumber)}
  //       style={style}
  //       key={dayNumber}>
  //       {dayNumber}
  //     </div>
  //   );
  // }

  /**
   * 
   * @param {object} param
   * @param {string} param.type   Can be: 'previous' | 'next' | `null` where `null` is current
   */
  createDays() {
    const daysInWeek = 7;
    const { day, month, year, date, selectedDay, selectedMonth, selectedYear } = this.state;
    const list = [];
    const daysInCurrentMonth = moment([year, month, day]).daysInMonth();
    const daysInPreviousMonth = moment([year, month, day]).subtract(1, 'month').daysInMonth();
    let startDay = moment([year, month, 1]).day();

    const numPreviousDaysShown = Math.max(startDay - 1, 0);
    let numNextDaysShown = daysInWeek - (daysInCurrentMonth + numPreviousDaysShown) % daysInWeek;
    if (numNextDaysShown === daysInWeek) {
      numNextDaysShown = 0;
    }

    let from = 0 - numPreviousDaysShown;
    let until = daysInCurrentMonth + numNextDaysShown;

    const classNamePrefix = 'widget-day--';

    for (let i = from; i < until; i++) {
      const dayNumber = i + 1;
      const classNames = [];
      const style = {};
      let isDisabled = false;
      let type = '';
      let referenceDate = moment([year, month, 1]);

      if (dayNumber <= 0) {
        dayNumber = daysInPreviousMonth + i + 1;
        type = 'previous';
        referenceDate.subtract(1, 'month');
      }
      else if (dayNumber > daysInCurrentMonth) {
        dayNumber = i - daysInCurrentMonth + 1;
        type = 'next';
        referenceDate.add(1, 'month');
      }
      else {
        referenceDate.date(dayNumber);
      }

      // if (startDay) {
      //   style = { ...style, gridColumnStart: startDay};
      //   startDay = 0;
      // }

      if (type) {
        classNames.push(`${classNamePrefix}${type}`);
      }

      if (referenceDate.year() === selectedYear && referenceDate.month() === selectedMonth && dayNumber === selectedDay) {
        classNames.push(`${classNamePrefix}selected`);
      }
      else if (dayNumber === day && month === date.month() && year === date.year()) {
        classNames.push(`${classNamePrefix}current`);
      }

      if (this.checkIsInDisabledRange({ day: dayNumber, month: referenceDate.month(), year: referenceDate.year() })) {
        isDisabled = true;
        classNames.push(`${classNamePrefix}disabled`);
      }

      const clickAction = !isDisabled
        ? () => this.changeDay({ day: dayNumber, month: referenceDate.month(), year: referenceDate.year() })
        : () => {};

      list.push(
        <div className={`widget-day ${classNames.join(' ')}`} onClick={clickAction}
          style={style}
          key={i}
        >
          {dayNumber}
        </div>
      );
    }
    return list;
  }

  /**
   *  Disabled ranges = array of from, until
   *
   * @param {number} day
   * @param {number} month
   * @param {number} year
   */
  checkIsInDisabledRange({ day, month, year }) {
    const current = moment([year, month, day]);
    return _find(this.props.disabledRanges, range => {
      const from = moment([range.from.year, range.from.month, range.from.day]);
      const until = moment([range.until.year, range.until.month, range.until.day]);
      return current.isSameOrAfter(from) && current.isSameOrBefore(until);
    }) != null;
  }

  createDayLabels() {
    const list = [];
    for (let i = 1; i < 8; i++) {
      const label = moment().day(i).format('ddd');
      list.push(<div className="widget-label" key={i}>{label}</div>)
    }
    return list;
  }

  createMonthSelector(current) {
    const list = [];
    for (let i = 0; i < 12; i++) {
      list.push({ value: i, label: moment().month(i).format('MMMM')});
    }
    return (
      <Dropdown onChange={(value) => this.changeMonth(value)} value={current} options={list} height={this.state.dropdownHeight} />
    );
  }

  createYearSelector(current) {
    const list = [];
    for (let i = MIN_YEAR; i < MAX_YEAR; i++) {
      list.push({ value: i, label: moment().year(i).format('YYYY')});
    }
    return (
      <Dropdown onChange={(value) => this.changeYear(value)} value={current} options={list} height={this.state.dropdownHeight} />
    );
  }

  changeDay({ day, month, year }) {
    console.log(day, month, year, moment([year, month, day]).format('DD MMM YYYY'));

    // let { month, year } = this.state;
    // let reference = moment([year, month, 1]);
    // const day = value + 1;
    // if (value < 0) {
    //   reference.subtract(1, 'month');
    //   reference.date(reference.daysInMonth() + day);
    // }
    // else {
    //   reference.date(day);
    // }
    // console.log(reference.date(), month, year);

    // moving to previous or next
    this.setState({ selectedDay: day, selectedMonth: month, selectedYear: year, month, year })
  }

  changeMonth(value) {
    this.setState({ month: value });
  }

  changeYear(value) {
    this.setState({ year: value })
  }

  previousMonth() {
    let { day, month, year } = this.state;
    const previousMonth = moment([year, month, day]).add(-1, 'month');
    this.setState({ day: previousMonth.date(), month: previousMonth.month(), year: previousMonth.year() });
  }

  nextMonth() {
    let { day, month, year } = this.state;
    const nextMonth = moment([year, month, day]).add(1, 'month');
    this.setState({ day: nextMonth.date(), month: nextMonth.month(), year: nextMonth.year() });
  }

  componentDidUpdate() {
    if (this.state.dropdownHeight !== this.refs.body.clientHeight) {
      this.setState({ dropdownHeight: this.refs.body.clientHeight });
    }
  }
  componentDidMount() {
    this.setState({ dropdownHeight: this.refs.body.clientHeight });
  }

  // onChangeField({ value, day, month, year }) {
  //   console.log('change', value, day, month, year);
  //   if (day && month && year) {
  //     this.setState({ selectedDay: day, selectedMonth: month, selectedYear: year });
  //   }
  // }

  onChangeField({ day, month, year, resolvedDate }) {
    if (resolvedDate && resolvedDate.isValid() && resolvedDate.year() >= MIN_YEAR && resolvedDate.year() <= MAX_YEAR) {
      this.changeDay({ day, month, year });
    }
  }

  render() {
    const { day, month, year, date } = this.state;
    return (
      <div className="date-picker">
        <DateField onChange={value => this.onChangeField(value)} />
        <div className="widget">
          <div className="header">
            <MonthNavigator onClick={() => this.previousMonth()} direction="left" />
            <div className="header-month">{this.createMonthSelector(month)}</div>
            <div className="header-year">{this.createYearSelector(year)}</div>
            <MonthNavigator onClick={() => this.nextMonth()} direction="right" />
          </div>
          <div className="widget-body" ref="body">
            {this.createDayLabels()}
            {this.createDays()}
          </div>
        </div>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“力矩”中导入力矩；
从“lodash”导入{find as_find}；
从“./Dropdown/Dropdown”导入{Dropdown}；
从“./date field/DateField”导入{DateField}；
从“/month navigator/MonthNavigator”导入{MonthNavigator}；
导入“/Widget.scss”；
最小施工年份=1900；
const MAX_YEAR=力矩（）.年（）+5；
导出类小部件扩展组件{
建造师（道具）{
超级（道具）；
const date=props.date | | moment（）；
此.state={
日期，
day:date.date（），
月份：日期。月份（），
年份：日期。年份（），
选定日期：10，
所选月份：2，
选定年份：2019年，
下降高度：200，
};
}
//createDay（{dayNumber，startDay}）{
//const{day，month，year，date，selectedDay}=this.state；
//让状态=“”；
//如果（月===date.month（）&&year==date.year（））{
//状态=日数===所选日期
//？“小部件日——已选定”
//：（dayNumber==天
//？“小部件日——当前”
//         : ''
//       );
//   }
//常量样式={}；
//如果（开始日期）{
//style={…style，gridColumnStart:startDay}；
//开始日期=0；
//   }
//返回(
//this.changeDay（{day:dayNumber）}
//style={style}
//key={dayNumber}>
//{dayNumber}
//     
//   );
// }
/**
* 
*@param{object}param
*@param{string}param.type可以是：'previous'|'next'|'null'，其中'null'是当前的
*/
createDays（）{
const daysInWeek=7；
const{day，month，year，date，selectedDay，selectedMonth，selectedYear}=this.state；
常量列表=[]；
const daysincurrentmount=时刻（[年、月、日]）.daysInMonth（）；
const daysInPreviousMonth=时刻（[年、月、日]）。减去（1，'月'）。daysInMonth（）；
设startDay=时刻（[年、月、日]）；
const numPreviousDaysShown=Math.max（startDay-1,0）；
设numNextDaysShown=daysInWeek-（daysInCurrentMonth+numPreviousDaysShown）%daysInWeek；
如果（numNextDaysShown==daysInWeek）{
numNextDaysShown=0；
}
让from=0-numpreviousdays显示；
让until=daysincurrentmount+numNextDaysShown；
常量classNamePrefix='widget day--'；
for（设i=from；ithis.changeDay（{day:dayNumber，month:referenceDate.month（），year:referenceDate.year（）}）
: () => {};
list.push(
{dayNumber}
);
}
退货清单；
}
/**
*禁用范围=从、到的数组
*
*@param{number}天
*@param{number}月
*@param{number}年
*/
CheckIsIndisableRange（{日、月、年}）{
恒流=力矩（[年、月、日]）；
return\u find（this.props.disabledRanges，range=>{
const from=时刻（[range.from.year，range.from.month，range.from.day]）；
const-until=时刻（[range.until.year，range.until.month，range.until.day]）；
返回当前isSameOrAfter（从）和当前isSameOrAfter（直到）；
})！=null；
}
createDayLabels（）{
常量列表=[]；
for（设i=1；i<8；i++）{
常量标签=矩（）.day（i）.format（'ddd'）；
list.push（{label}）
}
退货清单；
}
CreateMonths选择器（当前）{
常量列表=[]；
for（设i=0；i<12；i++）{
push（{value:i，label:moment（）.month（i）.format（'MMMM'）}）；
}
返回(
this.changeMonth（value）}value={current}options={list}height={this.state.dropdownhight}/>
);
}
createYearSelector（当前）{
常量列表=[]；
for（设i=MIN\u YEAR；i
);
}
changeDay（{日、月、年}）{
日志（日、月、年、时刻（[年、月、日]）格式（'DD-MMM-YYYY'）；
//设{month，year}=this.state；
//设参考=时刻（[年，月，1]）；
//常数天=值+1；
//如果（值<0）{
//参考。减去(