在 React js 的模态窗口中修复日期选择器

IT技术 reactjs
2021-05-03 11:20:07

我有这个组件：

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <DatePicker
          onChange={test}
          open={true}
          showNow={false}
          dateRender={(current) => {
            const style = {};
            if (arr.includes(current)) {
              style.border = "1px solid red";
              style.borderRadius = "50%";
            }
            return (
              <div className="ant-picker-cell-inner" style={style}>
                {current.date()}
              </div>
            );
          }}
        />
      </Modal>
    </>
  );
};

当我打开模态时，我会看到它外面的日历。如何将日历放在模态窗口内，而不是像现在这样放在外面？
演示：https : //codesandbox.io/s/basic-antd494-forked-6lkqg?file=/ index.js: 269-1303

3个回答

这是，IMO，令人难以置信的hackish，但这是我可以让日期选择器的弹出窗口表现得更好地嵌套在模态中的唯一方法。

  1. 使用getPopupContainerprop 来指定父应该是什么，它默认为“body”。我们可以创建自己的元素来附加日期弹出窗口。
  2. 使用popupStyleprop 来覆盖和设置positionCSS 规则。这是position: absolute在默认情况下，我们wan't相对定位。
  3. DatePicker在弹出窗口附加到之后添加一个空的 div 。
  4. HACK ALERT：DatePicker在我们创建的那个和弹出窗口之间插入一个 div，所以 CSS 规则级联和继承得到 fubar'd，它也有position: absolute。我们需要覆盖它以使用相对定位。

代码：

<>
  <Button type="primary" onClick={showModal}>
    Open Modal
  </Button>
  <Modal
    title="Basic Modal"
    visible={isModalVisible}
    onOk={handleOk}
    onCancel={handleCancel}
  >
    <DatePicker
      getPopupContainer={() => document.getElementById("date-popup")}
      popupStyle={{
        position: "relative"
      }}
      onChange={test}
      open={true}
      showNow={false}
      dateRender={(current) => {
        const style = {};
        if (arr.includes(current)) {
          style.border = "1px solid red";
          style.borderRadius = "50%";
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
    <div id="date-popup" />
  </Modal>
</>

CSS

#date-popup > div {
  position: relative !important;
}

在此处输入图片说明

这是 hackish 的主要原因是因为!important通常应该避免使用 ，而应该努力增加选择器的特异性。我无法将它撞到足以覆盖样式。（我相信这是因为那个 div 也使用了一些内联styleprop/attribute）

编辑 fix-date-picker-inside-modal-window-in-react-js

DatePicker 本身也是一种 Modal，所以不能嵌入到 Modal 中。您可以通过检查 Modal 和 DatePicker 组件来简单地检查这一点。

如果你想打开DatePicker，你可以控制模态体的高度。像这样的东西。

<Modal
  title="Basic Modal"
  visible={isModalVisible}
  onOk={handleOk}
  onCancel={handleCancel}
  bodyStyle={{
    height: 400
  }}
>

这是另一个建议：

      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        style={{ minHeight: `500px` }}
      >
其它你可能感兴趣的问题
上一篇使用 Draft.js 的 React 和 Electron：“未定义全局” 下一篇使用带有数组的 gatsby-plugin-image 的 GatsbyImage 的问题