我在挑选位置上有问题

Question

我正在使用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"
   />

有什么建议吗？

Answer 1

这是测试的反应日期选择器4.2.1

添加道具portalId会自动解决问题。

根据它的文档，如果在dom中找不到提供的portalId，那么默认情况下将创建一个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" 
/>

Answer 2

我修正了它，因为react-popper将把popover放在与父div相同的约束中。对于父div受到某种约束的情况——一个可滚动的div——popper将出现在div中，并将被它约束为。

在我的例子中，我希望popover不受约束，它是父的。为了解决这个问题，我将popover放置在约束容器之外的容器中。

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}
/>

最终结果：