antd react 动态表单验证和赋

关注

原创最新推荐文章于 2026-10-04 16:27:12 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

React、AntD，封装动态表单 在React中使用Ant Design（简称AntD）来封装动态表单是一个常见的需求，特别是在需要灵活配置表单字段的场景下。以下是一个基本的步骤和示例代码，展示如何使用React和AntD来封装一个动态表单。阅读详情

import {Button, Form, Input, Space} from "antd";
import React from "react";
import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons';

export default class Test extends React.Component{

  state = {
    formArr: []
  }

  formRefMethods = React.createRef()

  async submitForm() {
    const methods = await this.formRefMethods.current.validateFields();
    console.log(methods.sights);
    if (methods.sights){
      // todo
    }

  }

  setForm() {
    const temp = []
    for (let i = 0; i < 5; i++) {
      temp.push({price: i})
    }
    this.formRefMethods.current.setFieldsValue({
      sights: temp
    })
  }

  render() {


    return(
      <div>

        <div style={{display: 'flex', }}>
          <div>
            <div style={{padding: '20px 50px'}}>
              <Button onClick={() => this.setForm()}>赋值</Button>
              &emsp;
              <Button onClick={() => this.submitForm()}>提交验证</Button>
            </div>
            <br/>
            <Form
              ref={this.formRefMethods}
              style={{margin: '0px auto', width: '400px'}}
              name="dynamic_form_methods" autoComplete="off">
              <Form.List name="sights">
                {(fields, {add, remove}) => (
                  <div style={{ paddingBottom: '20px'}}>
                    <Form.Item style={{marginBottom: '10px'}}>
                      <Button size="small" style={{width: '150px', marginLeft: '86px'}} onClick={() => add()} block icon={<PlusOutlined/>}>
                        添加检测方法
                      </Button>
                    </Form.Item>
                    <div >
                      {fields.map(field => (
                        <Space key={field.key} align="baseline"  style={{width: '80%'}}>
                          <Form.Item
                            style={{marginBottom: '10px'}}
                            {...field}
                            label="检测方法"
                            name={[field.name, 'price']}
                            fieldKey={[field.fieldKey, 'price']}
                            rules={[{required: true, message: '请输入'}]}
                          >
                            <Input style={{width: '200px'}}/>
                          </Form.Item>
                          <MinusCircleOutlined onClick={() => remove(field.name)}/>
                        </Space>
                      ))}
                    </div>
                  </div>
                )}
              </Form.List>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}