antd动态新增表单_antd动态添加表单项

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)))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

index.less:

.anticon {
  line-height: 3;
}

.ant-col{
  margin-bottom: 1vw;
}

.ant-row{
  padding-left: 2vw;
}
1
2
3
4
5
6
7
8
9
10
11