使用 getFieldDecorator 正确设置 Antd DatePicker 初始值答案

【问题标题】：Properly setting Antd DatePicker initial value using getFieldDecorator使用 getFieldDecorator 正确设置 Antd DatePicker 初始值
【发布时间】：2020-01-19 01:18:46
【问题描述】：

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

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 为空，则没有错误，默认情况下使用第二种方法应该显示今天的日期。

更新：

如果我预先创建 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);

代码example

NB：类似的问题（Using DatePicker with Form FormItem in antd design react）。它有不同的错误“我得到异步验证器说 'publishDate 不是字符串”

【问题讨论】：

你需要显示导致错误的{...inputProperties['joiningDate']}，请创建一个reproducible示例，参考How to create a Minimal, Reproducible Example
@DennisVash 更新了代码示例。 inputProperties 仅包含与显示的错误无关的占位符值。在官方文档中，如果我使用的是getFieldDecorator，则不应使用defaultValue 或value 属性。所以你不应该假设这个{...inputProperties['joiningDate']} 会有任何会导致错误的东西。
尝试添加一个代码框：codesandbox.io/s/antdstart-n8n96，第二次尝试应该可以，仍然没有一个好的可重现示例，很难帮助你。
@DennisVash 这就是 DatePicker 的问题。
那不是，正如你所见，我编辑了你的沙箱，它可以工作

标签： javascript reactjs antd

【解决方案1】：

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

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);

【讨论】：

谢谢。如果我使用mapPropsToFields 设置表单数据值，我认为initialValue 毫无用处。
!data === true时不是没用
很好，如果有帮助，欢迎采纳，下次请做一个可生产的例子，干杯