日期選擇器未正確設置日期和時間

Question

我有一個應用程序應該從數據選擇器和時間選擇器中獲取數據，並在控制台中獲取 output 這個數據。

 function onChange(value, dateString) { console.log("Selected Time: ", value); console.log("Formatted Selected Time: ", dateString); } function onOk(value) { console.log("onOk: ", value); } function onChangeTime(value) { console.log(value); } ReactDOM.render( <> <DatePicker renderExtraFooter={() => ( <RangePicker onChange={onChangeTime} format="HH:mm" /> )} onChange={onChange} onOk={onOk} /> </>, document.getElementById("container") );

所以，在日期選擇器的頁腳上，我有一個范圍時間選擇器，output 的值應該是一個范圍（例如：10:00 - 12:00）。
問題：現在我在嘗試設置日期時遇到了問題。 當我點擊一個日期時，日期選擇器正在關閉，當我第一次設置時間時，同樣的問題，當我第二次點擊時，日期選擇器也正在關閉，我無法設置日期。
問題：如何解決問題以及如何在onChangeTime function 中設置 output 日期和在onChange function 中設置時間？
演示： https://codesandbox.io/s/distracted-wu-roqvr?file=/index.js:206-214

Answer 1

github ant-design bug tracker 上發布了類似的問題/票證。 這里有一個鏈接供您參考：

RangePicker 與 Select 組件在 renderExtraFooter 觸發 onOpenChange 從 RangePicker #24696

有一種解決方法，即創建一個受控日期組件。 目前發生的情況是，當您在 DatePicker 中設置一個日期時，它的默認行為是關閉，當焦點從 DatePicker 移開時，即當您與 TimePicker 交互時，也會發生同樣的情況。

我建議如下：

import React, {useState} from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker, TimePicker, Button } from "antd";

const { RangePicker } = TimePicker;

const App = () => {
const [datePickerOpen, setDatePickerOpen] = useState(false);

function onChange(value, dateString) {
   console.log("Selected Time: ", value);
   console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
   console.log("onOk: ", value);
}

function onChangeTime(value) {
   console.log(value);
}

return <DatePicker
         open={datePickerOpen}
         onClick={() => setDatePickerOpen(true)} 
         renderExtraFooter={(mode) => <div>
            <RangePicker onChange={onChangeTime} format="HH:mm" />
            <Button onClick={() => setDatePickerOpen(false)}>Apply</Button> 
           </div>
         }
         onChange={onChange}
        />
};

ReactDOM.render(
  <>
    <App/>
  </>,
  document.getElementById("container")
);

對代碼的主要更改是將函數移動到功能組件中，添加一個 state 掛鈎 => [datePickerOpen, setDatePickerOpen]，初始默認值為 false。 在 DatePicker 組件內部，我使用了“open”屬性使其成為受控組件，然后添加了一個“onClick”事件處理程序來打開 DatePicker。 在“renderExtraFooter”中，我添加了一個“div”，它充當 RangePicker 和 Button 組件的包裝器。 當用戶輸入完日期和時間后，他們可以點擊按鈕“應用”組件來關閉 DatePicker。

我沒有對樣式做任何事情，按鈕只是 Ant 設計的默認按鈕。 您可以在按鈕上添加顏色以引起用戶“行動號召”的注意，還可以應用樣式來對齊 TimePicker 和按鈕。

希望這可以幫助。