reactjs - 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
  }   

}

标签： reactjsantddaterangepicker

Answer 1

遗憾的是，无法在 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>
  );
};