如何在 Ant Design 的 Form.Item 中为 DatePicker 使用 initialValue

Question

Ant Design 说defaultValue如果我Form.Item用name.

https://ant.design/components/form/

After wrapped by Form.Item with name property, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls, the flow of form data will be handled by Form which will cause:

You shouldn't use onChange on each form control to collect data(use onValuesChange of Form), but you can still listen to onChange.

You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamiclly, you should use setFieldsValue in that situation.

所以我设置initialValues为Form组件，当我将 Form 与 DatePicker 一起使用时出现此错误。

moment.js:93 Uncaught TypeError: date.clone is not a function
    at Object.format (moment.js:93)
    at useValueTexts.js:13
    at Array.map (<anonymous>)
    at useValueTexts.js:12
    at useMemo (useMemo.js:6)
    at useValueTexts (useValueTexts.js:7)
    at InnerPicker (Picker.js:158)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)

我的代码是这样的。
worker对象有一个dateOfBirthISOString。

After wrapped by Form.Item with name property, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls, the flow of form data will be handled by Form which will cause:

You shouldn't use onChange on each form control to collect data(use onValuesChange of Form), but you can still listen to onChange.

You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamiclly, you should use setFieldsValue in that situation.

如何获取和使用工人 dateOfBirth 的默认值？
谢谢你。

Answer 1

在initialValue所述的DatePicker部件必须是一个moment对象。您需要将对象dateOfBirth上的字段worker从 ISOString 转换为矩对象，如下所示：

const dateFormat = "YYYY/MM/DD";

const worker = {
  dateOfBirth: moment('2020-06-09T12:40:14+0000')
};

ReactDOM.render(
  <Form
    layout="vertical"
    hideRequiredMark
    onFinish={values => onFinish(values)}
    initialValues={worker}
  >
    <Form.Item label="Date Of Birth" name="dateOfBirth">
      <DatePicker format={dateFormat} />
    </Form.Item>
  </Form>,
  document.getElementById("container")
);

代码沙盒链接：

https://codesandbox.io/s/antdesign-setting-initialvalue-on-datepicker-inside-form-ypi4u?file=/index.js:239-652