javascript - 使用 getFieldDecorator 正确设置 Antd DatePicker 初始值

Question

尝试使用双向绑定将默认字段值设置为antd 。 DatepickergetFieldDecorator

form.getFieldValue('joiningDate')是一个时间戳值

第一次尝试

<Form.Item >
  {getFieldDecorator('joiningDate', { initialValue: moment.unix(form.getFieldValue('joiningDate')) })(
   <DatePicker disabled={inProgress}></DatePicker>
  )}
</Form.Item>

第二次尝试

<Form.Item >
  {getFieldDecorator('joiningDate', { initialValue: moment()) })(
   <DatePicker  disabled={inProgress}></DatePicker>
  )}
</Form.Item>

joiningDate当具有值时，上述两种方法都会引发以下错误-

如果joiningDate为 null 则没有错误，默认情况下使用第二种方法，它应该显示今天的日期。

更新：

如果我预先创建的时刻对象joiningDate，那么就DatePicker可以了。但我只想在绑定到 Datepicker 时对其进行格式化。似乎initialValue道具没有效果。

export default function App() {
  return (
    <FlexBox>
      <FormContainer data={{ joiningDate: Date.now() }} />
    </FlexBox>
  );
}
const MyForm = ({ form }) => {
  const { getFieldDecorator } = form;
  return (
    <Form>
      <Form.Item>
        {getFieldDecorator("joiningDate", { initialValue: moment() })(
          <DatePicker />
        )}
      </Form.Item>
    </Form>
  );
};

const FormContainer = Form.create({
  name: "advanced_search",
  mapPropsToFields({ data }) {
    if (!data) return;
    let precreatedFields = {
      joiningDate: Form.createFormField({
        value: data["joiningDate"]
      })
    };

    //more fields are removed
    return precreatedFields;
  }
})(MyForm);

代码示例

注意：类似的问题（在 antd design react 中使用带有 Form FormItem 的 DatePicker）。它有不同的错误“我得到异步验证器说'publishDate不是字符串”

标签： javascriptreactjsantd

Answer 1

datePicker您不使用moment实例进行初始化。

export default function App() {
  return (
    <FlexBox>
//                                        v Not `Date.now()`
      <FormContainer data={{ joiningDate: moment() }} />
    </FlexBox>
  );
}

这就是为什么您会收到运行时错误mapPropsToFields：

const FormContainer = Form.create({
  name: 'advanced_search',
  mapPropsToFields({ data }) {
    if (!data) return;
    let precreatedFields = {
      joiningDate: Form.createFormField({
        value: data['joiningDate']
      })
    };

//          v You initializing 'joiningDate' with Date.now() and not with moment.
    return precreatedFields;
  }
})(MyForm);