antd-react-form-动态增删表单项

以antd4.x版本为例。代码如下：

const [checkList] = useState([{ label: '客户端', value: 1 }, { label: '服务端', value: 2 }, { label: 'MTOP', value: 3 }]);// checked列表
  const [showFlag, setShowFlag] = useState(false); // 控制是否可以增添表单        
       <Form
          {...formItemLayout}
          form={form}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="场景名称"
            name="sceneName"
            rules={[
              {
                required: true,
                message: '请输入场景名称',
              },
              { pattern: new RegExp(/^\S+/, 'g'), message: '场景名称不能包含空格' },
            ]}
          >
            <Input style={{ width: 260 }} />
          </Form.Item>

          <Form.Item
            label="fromSource"
            name="fromSource"
          >
            <Input style={{ width: 260 }} />
          </Form.Item>

          <Form.Item
            label="调用方法"
            name="invokeTypes"
            rules={[
              {
                required: true,
                message: '请选择调用方法',
              },
            ]}
          >
            <Checkbox.Group>
              {checkList.map(item => (
                <Checkbox value={item.value} key={item.value} onChange={checkBoxChange}>{item.label}</Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>

          <Form.List name="interfaceUrls" initialValue={['']}>
            {(fields, { add, remove }) => (
              <>
                {
                  fields.map((field, index) => (
                    <Form.Item
                      label="接口地址"
                      key={field.key}
                    >
                      <Form.Item
                        {...field}
                        noStyle
                      >
                        <Input style={{ width: 260, marginRight: '13px' }} />
                      </Form.Item>
                      {showFlag && index === 0 ? (<a onClick={() => add()}>添加</a>) : null}
                      {index !== 0
                        ? (<a onClick={() => remove(field.name)}>删除</a>)
                        : null}
                    </Form.Item>
                  ))
                }
              </>
            )}
          </Form.List>

          <Form.Item
            label="用户路径"
            name="userPath"
            rules={[
              {
                required: true,
                message: '请输入用户路径',
              },
            ]}
          >
            <Input style={{ width: 260 }} />
          </Form.Item>
        </Form>

效果如下：