在 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 value和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>