我在 react-datepicker 位置遇到问题答案

【问题标题】：I'm having trouble with react-datepicker position我在 react-datepicker 位置遇到问题
【发布时间】：2021-03-01 01:55:45
【问题描述】：

我正在使用 react-datepicker，但由于某种原因它在容器后面显示日历。

我试过了：

.react-datepicker-popper {
  z-index: 9999 !important;
}

但它不起作用。

这是日期选择器组件

<DatePicker
     selected={startDateSingleDay}
     onChange={onChangeDatePickerStartDateSingleDay}
     dateFormat="yyyy-MM-dd"
     className="text-center"
     showMonthDropdown
     showYearDropdown
     dropdownMode="select"
     onChangeRaw={handleDateChangeRaw}
     popperClassName="date-picker-reports"
     placeholderText="Choose a date"
   />

有什么建议吗？

【问题讨论】：

尝试直接从开发工具更改 CSS 样式，然后将适用的样式应用到您的 JS/CSS 文件中。
容器是否具有position: relative 样式？
@emi 是的，我已经尝试过了，但是日期选择器的 className which is .react-datepicker-popper 不应用 z-index 属性。
@AlexeyKorkoza 我试过position: relative 也没有它，我得到了相同的结果
@Alex Yepes 很难回答你的问题。所以，我认为你应该在你的问题中发布你的代码。在这种情况下，我们将能够比现在更快地为您提供帮助。

标签： css reactjs react-datepicker

【解决方案1】：

我修复了它，因为 react-popper 会将弹出框置于与父分区对于父 div 以某种方式受到约束的情况—— 可滚动的 div -- popper 将出现在 div 内，并将受其约束。

在我的情况下，我希望弹出框不受限制，它是父母。为了解决这个问题，我将弹出框放在外面的容器中受约束的容器。

import { Portal } from "react-overlays";

const CalendarContainer = ({ children }) => {
  const el = document.getElementById("calendar-portal");

  return <Portal container={el}>{children}</Portal>;
};

并将 popperContainer 属性添加到 DatePicker 中，如下所示：

<DatePicker
    selected={startDate}
    onChange={onChangeDatePickerStartDate}
    dateFormat="yyyy-MM-dd"
    className="text-center date-picker-reports"
    showMonthDropdown
    showYearDropdown
    dropdownMode="select"
    onChangeRaw={handleDateChangeRaw}
    popperPlacement="top-start"
    placeholderText="Choose a start date"
    popperContainer={CalendarContainer}
/>

最终结果：

【讨论】：

【解决方案2】：

这是针对 react-datepicker 4.2.1 测试的

添加一个道具 portalId 应该会自动解决问题。

根据其文档，如果在 dom 中找不到提供的 portalId，则默认创建一个，并在 prop 中传递该 id。

<DatePicker
 portalId="root-portal"
 selected={startDateSingleDay}
 onChange={onChangeDatePickerStartDateSingleDay}
 dateFormat="yyyy-MM-dd"
 className="text-center"
 showMonthDropdown
 showYearDropdown
 dropdownMode="select"
 onChangeRaw={handleDateChangeRaw}
 popperClassName="date-picker-reports"
 placeholderText="Choose a date" 
/>

【讨论】：

这为我修好了。
@Anil，是的，它修复了隐藏/显示覆盖问题。但它不会触发对日期的点击。它只会在每次点击弹出窗口内的任何内容时关闭弹出窗口。
@SKR 您能否提供有关您所面临问题的更多信息？重现问题的代码框链接应该很棒。
我正在使用 OutsideClickHandler 插件，该插件将门户内的点击触发为外部点击，因此，我需要处理同样的事情。目前没有其他问题。 @阿尼尔