React中引用antd的Form表单数据获取

最新推荐文章于 2025-04-09 07:30:00 发布

linlinlinfeng

最新推荐文章于 2025-04-09 07:30:00 发布

阅读量2.8w

点赞数 2

分类专栏： react学习笔记

本文链接：https://blog.youkuaiyun.com/linlinlinfeng/article/details/82781812

版权

react学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了AntDesign中表单控件的使用方法，包括 getFieldDecorator 的功能与用法，如何通过它实现表单的双向绑定，以及如何设置验证规则确保数据的有效性和正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const { getFieldDecorator } = this.props.form;

this.getFieldsValue = this.props.form.getFieldsValue;//获得表单所有控件的值

this.props.form.getFieldsValue（“name”）//获得指定控件的值

this.props.form.validateFields((err, values) => {}) //校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件

在ant design 2x 中

{getFieldDecorator('note', { rules: [{ required: true, message: 'Please input your note!' }], })( <Input />）

getFieldDecorator 用于和表单进行双向绑定，其中

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value，数据同步将被 Form 接管

 {
        title: '付款金额',
        dataIndex: 'needPayPrice',
        key: 'needPayPrice',
        width: 120,
        render: (text, record, index) => {
          return (<FormItem style={{ marginBottom: 0 }}>{this.getFieldDecorator(`needPayPrice_${index}`, {
            initialValue: record.no_pay_amount,
            rules: [
              {
                message: '请填写正确的付款金额',
                pattern: /(^[0-9]{1,9}$)|(^[0-9]{1,9}[.]{1}[0-9]{1,2}$)/,
                required: true,
              },
              {
                validator: (rule, value, callback) => {
                  if (Number(value) <= 0) {
                    callback('请填写正确的付款金额');
                  }
                  callback();
                },
              },
            ],
            validateFirst: true,
          })(<Input placeholder="付款金额" style={{ width: 80 }} />)}
          </FormItem>);
        },
      },