如何在 Ant 設計的 Form.Item 中為 DatePicker 使用 initialValue

Question

Ant 設計說我不能使用defaultValue如果我用帶有name的Form.Item包裝它。

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 object 的dateOfBirth是 ISOString。

const dateFormat = 'YYYY/MM/DD';

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

如何獲取和使用工人 dateOfBirth 的默認值？
謝謝你。

Answer 1

DatePicker組件的initialValue必須是moment object。 您需要將worker object 上的dateOfBirth字段從 ISOString 轉換為時刻 object，如下所示：

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

Answer 2

我有類似的問題，但問題不同。 我不想使用 moment.js，但我無法從Antd版本 4 形式的道具中設置 initialValues。

因此，我嘗試了不同的解決方法並安裝了 formik和formik-antd 。 安裝后，我修改了我的 function 組件，如下所示：

import React from "react"
import {
  Input,
  ResetButton,
  SubmitButton,
  Form,
} from "formik-antd"
import { Formik } from "formik"
import { Button } from "antd"
import "antd/dist/antd.css"

export function MyForm(props: any) {
  
    const onFinish = (values: any) => {
      console.log(values);
    };

  return (
    <Formik
      enableReinitialize
      initialValues={{
        company: props.myobject.company,
        account: props.myobject.account
      }}
      onSubmit={onFinish}
      validate={values => {
        if (!values.company) {
          return { company: "required" }
        }
        if (!values.account) {
          return { account: "required" }
        }
        return undefined
      }}
      render={formik => (
        <Form>
          <div className="container">
            <div className="component-container">
              <Form.Item
                name="company"
                label="Company"
                hasFeedback={true}
                showValidateSuccess={true}
              >
              <Input name="company" placeholder="Basic Input" />
              </Form.Item>
              <Form.Item
                name="account"
                label="Account"
                hasFeedback={true}
                showValidateSuccess={true}
              >
                <Input name="account" placeholder="Validated input" />
              </Form.Item>
              <Button.Group size="large">
                <ResetButton>Reset</ResetButton>
                <SubmitButton type="primary" disabled={false}>
                  Submit
                </SubmitButton>
              </Button.Group>
            </div>
          </div>
        </Form>
      )}
    />
  )
}