选择日期时会触发 onBlur答案

【问题标题】：onBlur is getting triggered when date is selected选择日期时会触发 onBlur
【发布时间】：2022-11-02 22:16:05
【问题描述】：

我正在使用带有标志open 的受控日期选择器，可用于打开或关闭日期选择器。在外部单击时会触发 onBlur，导致它关闭。但是当我试图选择范围时，它不让我，而是关闭。

import React, { useState } from "react";
import "./styles.scss";
import { DatePicker } from "antd";
import "antd/dist/antd.css";

const { RangePicker } = DatePicker;

export default function Working() {
  const [pickerValue, setPickerValue] = useState();
  const [open, setOpen] = useState(false);

  return (
    <RangePicker
      open={open}
      onOpenChange={() => setOpen(true)}
      className="custom-datepicker"
      dropdownClassName="custom-datepicker-dropdown"
      separator={<>-</>}
      format="DD.MM.YYYY HH:mm:ss"
      onBlur={() => setOpen(false)}
    />
  );
}

沙盒：https://codesandbox.io/s/ant-rangepicker-6gmz85?file=/src/Working.tsx:0-585

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks antd

【解决方案1】：

您可以添加一个处理程序来避免不必要的操作 onBlur。

const handleOnBlur = () => {
  if(condition is met) {
    setOpen(false)
  }
}

...
<RangePicker
      open={open}
      onOpenChange={() => setOpen(true)}
      className="custom-datepicker"
      dropdownClassName="custom-datepicker-dropdown"
      separator={<>-</>}
      format="DD.MM.YYYY HH:mm:ss"
      onBlur={handleOnBlur}
    />

【讨论】：