antd 4.16.0调用Form的resetFields后复选框未重置输入框正常如何解决？

问题原因 #

1. 你的Form表单initialValues配置中没有定义Mon字段的初始值：resetFields()的执行逻辑是将所有表单项重置为initialValues中对应字段的配置值，若字段不在initialValues列表中，重置时不会修改该字段的当前值，因此复选框状态不会恢复。
2. 你当前Mon对应的Form.Item内部仅放了<Text>组件，没有绑定复选框交互组件：valuePropName="checked"仅对自带checked属性的交互组件（如Antd的Checkbox、Switch）生效，普通文本组件没有该属性，无法完成值绑定。

解决方法 #

1. 在initialValues中添加Mon字段的初始值，默认不勾选设为false即可：

<Form
  layout="vertical"
  hideRequiredMark
  initialValues={{
    sunH: [
      moment("00:00", "HH:mm"),
      moment("00:00", "HH:mm"),
    ],
    monH: [
      moment("00:00", "HH:mm"),
      moment("00:00", "HH:mm"),
    ],
    Mon: false, // 新增Mon字段初始值
  }}
  ref={this.props.formRef}
>

2. 修改复选框项的代码，将文本放在Checkbox组件内部：

<Form.Item name="Mon" label="" valuePropName="checked">
  <Checkbox>Mon</Checkbox>
</Form.Item>

修改完成后再调用resetFields()即可正常重置复选框状态。

如果不想在initialValues中新增字段，也可以在重置时手动赋值：

this.formRef.current.resetFields();
this.formRef.current.setFieldsValue({ Mon: false });

内容的提问来源于stack exchange，提问作者Sai Krishnadas