前端案例—antd的表单项默认值提交时没有生效

发布时间:2023年12月23日

前端案例—antd的表单项默认值提交时没有生效


<Form
onFinish={handleCommit}
initialValues={{"ruleApplyDate":{"type":0}}}
>
  <Form.Item
    {...formItemLayout}
    label="规则应用时间"
    name="ruleApplyDate"
    required
    style={{ margin: "0" }}
  >
    <Form.Item
      name={["ruleApplyDate", "type"]}
      rules={[
        {
          required: true,
          message: "请选择规则应用时间",
        },
      ]}
    >
      <RadioGroup
        defaultValue={ruleApplyDateOptions[0]}
        options={ruleApplyDateOptions}
      ></RadioGroup>
    </Form.Item>
  </Form.Item>
</Form>

我想要给“规则应用时间”默认选中第一个选项,于是使用defaultValue属性,但是这样在onFinish提交的时候并不会生效。根据文档的描述如下:

被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

  1. 不再需要也不应该onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。
  2. 你不能用控件的 valuedefaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
  3. 你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

第二条表明,不可以使用defaultValue 和 Value 来设置表单域的值,因此如果我们想要更新,可以使用Form 里的 initialValues 来设置。

文章来源:https://blog.csdn.net/qq_43720551/article/details/135161926
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。