reactjs - react-modal:点击react-datepicker时如何让模态自动展开？ (附代码)

Question

如何让模态在点击react-datepicker时自动展开？模态最初适合，但是当您单击日期字段并且 react 日期选择器显示日历时， react 模态对话框不会自动展开？

之前:

点击日期后:

代码:

import React, { useState } from 'react';
import Modal from 'react-modal';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};

export default function TestPage2() {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  const [startDate, setStartDate] = useState(new Date());

  function openModal() {
    setIsOpen(true);
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
        style={customStyles}
      >
        <h3>Prior to Date Picker</h3>
        <label htmlFor="Checkin Date">Checkin Date</label>
        <DatePicker
          selected={startDate}
          // wrapperClassName="datePicker"
          // className="form-control"
          dateFormat="d MMMM yyyy"
          name="checkinDate"
          onChange={(date, event) => {
            if (date) {
              setStartDate(date)
            }
          }}
          />
          <h3>After Date Picker</h3>
      </Modal>
    </div>
  );
}

Answer 1

将以下属性添加到 customStyles 内的内容对象:

 overflow: 'hidden'

并更改react-datepicker-popper类的属性值:

.react-datepicker-popper {
  position: static!important;
  transform: none!important;
}

代码沙盒:https://codesandbox.io/s/awesome-feather-mj81tz