antd form表单的getFieldDecorator，validateFields，getFieldValue，setFieldsValue用法

最新推荐文章于 2024-06-13 10:54:16 发布

原创最新推荐文章于 2024-06-13 10:54:16 发布 · 8.9k 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在Ant Design Form中使用getFieldDecorator进行字段验证和值获取，包括设置初始值、规则验证、getFieldValue的应用以及setFieldsValue的使用实例。

1.getFieldDecorator

getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。

<From>
  <Form.Item label="月份：">
    {getFieldDecorator('summaryDate', {
      initialValue: '',
      rules: [{ required: true, message: '请选择月份' }]
     })(
        <MonthPicker allowClear={false} />
     )}
  </Form.Item>
</From>

2.validateFields

获取整个表单用getFieldDecorator设置的值

this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values)//表单所有通过getFieldDecorator设置的值
        //拿到值后进行后续操作
      }
    })

3.getFieldValue

在提交表单或是与后端交互时，如果需要一个控件的值，那么就用this.props.form.getFieldValue('变量名')的方式进行获取，注意：‘变量名’这个参数只能由getFieldDecorator所设定的。

this.props.form.getFieldValue('summaryDate');

getFieldValue不能获取没有使用getFieldDecorator绑定的控件（即：如果控件值标注了id属性，用这个方法无效）。应使用document.getElementById("id名").value的方式进行获取值。

4.setFieldsValue

给表单中某些用getFieldDecorator绑定的控件赋值

this.props.form.setFieldsValue({
    summaryDate: 123,
})