antd动态新增表单

刺骨的言语ヽ痛彻心扉 2023-01-14 01:37 303阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70]

## index.tsx: ##

import {  injectIntl } from "react-intl"
    import {  connect } from "dva";
    import {  Button, Col, Form, Icon, Input, InputNumber, Row, Select } from "are-common"
    import React, {  useEffect, useState } from "react"
    import './index.less'
    interface CreateFormProps { 
      modalVisible: boolean;
      onCancel: () => void;
      form: any;
      intl: any
    }
    
    const FormItem = Form.Item
    const Option = Select.Option
    
    var i = 10;
    
    var initData = [1, 2, 3]
    const SysDataList: React.FC<CreateFormProps> = (props) => { 
      const {  form } = props
      const {  getFieldDecorator } = form
    
      const [able, setAble] = useState(true)
      const [keys, setKeys] = useState<Array<number>>()
    
      useEffect(() => { 
        setKeys(initData)
      }, [])
    
      const formItems = keys?.map((k) => { 
        return (
          <Col span={ 12} key={ k} >
            { /* <FormItem label="配置编码" key={ `fieldName_${ k}`}>
              { getFieldDecorator(`fieldName_${ k}`, { 
                initialValue: '',
                validateTrigger: ['onChange', 'onBlur'], //校验子节点值的时机
                rules: [{ 
                  required: true,
                  message: '请输入!',
                }, { 
                  // validator: handleValidator,
                }],
              })(<Input placeholder="请输入" max={ 30} />)}
            </FormItem> */}
            <FormItem label="配置名称" key={ `remarks_${ k}`}>
              { getFieldDecorator(`remarks_${ k}`, { 
                initialValue: '',
                validateTrigger: ['onChange', 'onBlur'],
                rules: [{ 
                  required: true,
                  message: '请输入',
                }],
              })(<Input disabled={ able} placeholder="请输入中文名称" />)}
            </FormItem>
            <FormItem label="配置值" key={ `order_${ k}`}>
              { getFieldDecorator(`order_${ k}`, { 
                initialValue: '',
                rules: [{ 
                  required: true,
                  message: '请输入',
                }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
            <Icon type="minus-circle" onClick={ () => removeFile(k)} title='删除' />
          </Col>
        )
      });
    
      const removeFile = (key: number) => { 
    
      }
    
      const addField = () => { 
        initData = initData.concat(i++)
        setKeys(initData)
      }
    
      const save = () => { 
    
      }
    
      return (
        <div className="sup-are-layout-ref__full" style={ {  overflow: 'auto', height: '100vh', padding: '10px 0 0 10px' }}>
          <Form layout='inline'>
            { /* <Row style={ {  textAlign: 'center', marginBottom: 14 }}>
              <FormItem label="选择类型">
                { getFieldDecorator('type', { 
                  initialValue: '',
                  rules: [{ 
                    required: true,
                  }],
                })(<Select disabled={ true} style={ {  width: 200 }}>
                  <Option value={ 1}>文章类型</Option>
                  <Option value={ 2}>地图类型</Option>
                  <Option value={ 3} disabled={ true}>文件类型</Option>
                </Select>)}
              </FormItem>
              <FormItem label="类型名称">
                { getFieldDecorator('name', { 
                  initialValue: '',
                  rules: [{ 
                    required: true,
                    message: '请输入类型名称!',
                  }],
                })(<Input placeholder="请输入类型名称" style={ {  width: 200 }} />)}
              </FormItem>
            </Row> */}
            <Row>
              { formItems}
            </Row>
            <Row>
              <div style={ {  margin: 'auto', textAlign: 'center' }}>
                <Button icon="plus" onClick={ () => {  addField() }} >新增</Button>
                <Button icon="check" onClick={ () => {  save() }} style={ {  marginLeft: "10px" }}>保存</Button>
              </div>
            </Row>
    
          </Form>
        </div>
      )
    }
    
    export default injectIntl(Form.create<CreateFormProps>()(connect()(SysDataList)))

## index.less: ##

.anticon { 
      line-height: 3;
    }
    
    .ant-col{ 
      margin-bottom: 1vw;
    }
    
    .ant-row{ 
      padding-left: 2vw;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70]: /images/20221022/9a49dc86f3a9476b8d364d9e490fe9de.png