在 AntD Range Picker 中 Range Picker 关闭后如何调用 API？

问题描述

我想在所选日期和范围选择器关闭后进行 API 调用。我有以下代码。但是当它总是在更新所选日期之前调用 API 时。

<div>
      Select date range to proceed : <Space />
      <RangePicker
        format="YYYY-MM-DD"
        onChange={onChange}
        onopenChange={onClose}
        disabledDate={(currentDate) => currentDate.isAfter(moment())}
      />
    </div>

调用函数

function onChange(value,dateString) {
console.log(dateString);
setSelectedDates(dateString);  }



 function onClose(open) {    
  if (!open) {
    // API Call with selected date
  }   

}

解决方法

遗憾的是，无法在 RangePicker 的 Ant Design Api 上找到任何优雅的东西。但这将起作用并在面板关闭并设置日期时调用 api。

const App = () => {
  const [values,setValues] = useState([]);
  const [isOpen,setIsOpen] = useState(false);

  useEffect(() => {
    if (!isOpen && values && values[0] && values[1]) {
      console.log("API");
    }
  },[values,isOpen]);

  const onChange = (moments,dateStrings) => {
    setValues(dateStrings);
    console.log(dateStrings);
  };
  const onOpenChange = (open) => {
    setIsOpen(open);
    console.log(open);
  };
  return (
    <div>
      <RangePicker
        format="YYYY-MM-DD"
        onChange={onChange}
        onOpenChange={onOpenChange}
      />
    </div>
  );
};