React 动态增减表单项

需求

• 作为新增页面，表单中动态添加列
• 作为编辑页面，进入页面的时候可以展示出已添加的所有列

代码

dom --render

render() {
        const {visible, type, confinggro, list, item = {}, onOk, onCancel, form: {getFieldDecorator, validateFields, getFieldsValue}} = this.props
        const configGroupNode = [];
        const {getFieldValue} = this.props.form;
        getFieldDecorator('editvalues', {initialValue: item.editvalues});
        const editvalues = getFieldValue('editvalues');
        const keys = [];
        if (editvalues != undefined) {
            let evs = editvalues.split(',');
            var arrjsonkeys = [];
            for (var i = 0; i < evs.length; i++) {
                var jsonKeys = {};
                jsonKeys.key = i;
                jsonKeys.value = evs[i];
                arrjsonkeys[i] = jsonKeys
            }
            getFieldDecorator('keys', {initialValue: arrjsonkeys});
            var ar1 = []
            ar1 = getFieldValue('keys');
            console.log(ar1)
            for (var k=0;k<ar1.length;k++){
                keys[k] = ar1[k]
            }
        } else {
            getFieldDecorator('keys', {initialValue: [{key: 0, value: ''}]});
            var ar2 = []
            ar2 = getFieldValue('keys');
            for (var i = 0; i < ar2.length; i++) {
                if (ar2[i] != '') {
                    keys[i] = ar2[i];
                }
            }
        }
        id = keys.length - 1

        // const keys = getFieldValue('keys');
        const formItems = keys.map((k, index) => (
            <Form.Item
                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                label={index === 0 ? '配置值' : ''}
                required={false}
                key={k.key}
            >
                {getFieldDecorator(`value[${k.key}]`, {
                    initialValue: k.value,
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required: true,
                        whitespace: true,
                        message: "请输入一个配置值",
                    }],
                })(
                    <Input placeholder="passenger name" style={{ '60%', marginRight: 8}}/>
                )}
                {keys.length > 1 ? (
                    <Icon
                        className="dynamic-delete-button"
                        type="minus-circle-o"
                        onClick={() => this.remove(k)}
                    />
                ) : null}
            </Form.Item>
        ));

        //提交方法
        function handleOk() {
            validateFields((errors) => {
                if (errors) {
                    return
                }
                const data = {
                    ...getFieldsValue(),
                    version: item.version,
                }
                onOk(data)
            })
        }
       
        return (
            <Modal {...modalOpts}>
                <Form layout={'vertical'} className={Styles.verticalForm}>
                    </FormItem>
                </Form>
            </Modal>
        )

js

remove = (k) => {
        const {form} = this.props;
        const keys = form.getFieldValue('keys');
        if (keys.length === 1) {
            return;
        }
        form.setFieldsValue({
            keys: keys.filter(key => key.key !== k.key),
        });
    }

    add = () => {
        const {form} = this.props;
        const keys = form.getFieldValue('keys');
        const names = form.getFieldValue('value');
        for (var i = 0; i < names.length; i++) {
            if (names[i] == "") {
                Notification('info', '请先填写完空的一条再新增！')
                return
            }
        }
        id++;
        const nextKeys = keys.concat({key: id, value: ''});
        form.setFieldsValue({
            keys: nextKeys,
        });
    }

css 、变量

const FormItem = Form.Item
const Option = Select.Option;
const formItemLayout = {
    labelCol: {
        xs: {span: 20},
        sm: {span: 4},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
    },
};
const formItemLayoutWithOutLabel = {
    wrapperCol: {
        xs: {span: 24, offset: 4},
        sm: {span: 20, offset: 4},
    },
};
let id = 0;