datepicker 被困在按钮菜单中

Question

嗨，我是 react 的新手，我一直在使用 react-datepicker，但我遇到了这个问题，我制作了一个自定义按钮，当点击它时，它应该显示 datepicker，而且它做得很好，问题是它被困在里面按钮的菜单，我需要的是它在菜单外弹出（实际上我需要在选择时关闭菜单并只看到日期选择器）

任何形式的帮助都将不胜感激

如您所见，我的日期选择器在菜单中

这是我的菜单和日期选择器代码

<Menu

className="main-toolbar__menu"
anchorEl={this.state.anchors.options_settings}
open={Boolean(this.state.anchors.options_settings)}
onClose={() => this.handleDropdownClose('options_settings')}

>

    <MenuItem
      onClick={() => {
        this.toggleCalendar()     
      }}
    >
    <DatePicker
      customInput={<ExampleCustomInput />}
      selected={this.state.startDate}
      onChange={this.handleChange} 
    />
    </MenuItem>
    <MenuItem
      onClick={() => {
        this.handleModal('addNotificationModal', true)
        this.handleDropdownClose('options_settings')
      }}
    >
      <span>Notification Preferences</span>
    </MenuItem>
  </Menu>

Answer 1

您可以将日期选择器移到菜单组件之外，并根据切换逻辑和三元表达式对其进行切换。

 state = {
showCalendar:false
}
toggleCalendar = () => {
      this.setState({showCalendar:!this.state.showCalendar})
//or whatever logic you have for toggleCalendar already
}

  {this.state.showCalendar ? <DatePicker
          customInput={<ExampleCustomInput />}
          selected={this.state.startDate}
          onChange={this.handleChange} 
        /> : null }

       <Menu
    className="main-toolbar__menu"
    anchorEl={this.state.anchors.options_settings}
    open={Boolean(this.state.anchors.options_settings)}
    onClose={() => this.handleDropdownClose('options_settings')}
    >

        <MenuItem
          onClick={() => {
            this.toggleCalendar()     
          }}
        >

        </MenuItem>
        <MenuItem
          onClick={() => {
            this.handleModal('addNotificationModal', true)
            this.handleDropdownClose('options_settings')
          }}
        >
          <span>Notification Preferences</span>
        </MenuItem>
      </Menu>