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

Question

我想在所选日期和范围选择器关闭后拨打 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
  }

}

Answer 1

遗憾的是，无法在 Ant Design Api 上为 RangePicker 找到任何优雅的使用方法。但这将起作用并调用 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>
  );
};

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

How to call API after the Range Picker is closed in AntD Range Picker?

daterangepicker

reactjs

antd