在 Ant-Design 中使用表單設置 RangePicker 的默認值

Question

我有一個應用程序可以從前端獲取數據並將其存儲在狀態中。

對於某些輸入，我使用以下方法設置默認值：

 form.setFieldsValue({ note: text.note, gender: text.gender });

但我也想為 RangePicker 設置默認值。 我有應該處於默認狀態的數據：

 useEffect(() => { setText({ note: "2", gender: "demo", start: "2020-03-09 13:00", //set as default value for Range Picker end: "2020-03-27 13:17" //set as default value for Range Picker }); }, []);

如何使用form.setFieldsValue精確設置范圍選擇器的默認值？ 鏈接到我的代碼： https : //codesandbox.io/s/form-methods-ant-design-demo-hzgg7

Answer 1

Ant Design RangePicker API

props值和defaultValue都具有以下類型：

[片刻，片刻]

所以設置默認值如下：

Picker: [moment("2020-03-09 13:00"), moment("2020-03-27 13:17")]

完整代碼：（ Picker有一個大寫的第一個字母，最好改變它）

useEffect(() => {
  setText({
    note: "2",
    gender: "demo",
    Picker: [moment("2020-03-09 13:00"), moment("2020-03-27 13:17")]
  });
}, []);

form.setFieldsValue({
  note: text.note,
  gender: text.gender,
  Picker: text.Picker
});

<Form.Item name="Picker" label="date"> // the name here is `Picker` from your code
  <RangePicker
    showTime={{ format: "HH:mm" }}
    format="YYYY-MM-DD HH:mm"
    onChange={onChange2}
  />
</Form.Item>