React配合Immutable.js实现动态增减表单项

import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import {List} from 'immutable';

import {
    Button,
    Icon,
    FormControl,
    InputLabel,
    Input,
    FormHelperText
} from '@material-ui/core';

const styles = (theme) => ({
    wrap: {
        marginBottom: theme.typography.pxToRem(16),
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    formControl: {
        width: '100%',
        '&:first-child': {
            marginRight: 20
        }
    },
    addCustom: {
        textAlign: 'center'
    }
});

@withStyles(styles)
class AddCustomField extends React.Component {
    state = {
        customList: [
            {
                key: '',
                value: '',
                errKeyStatus: false,
                errKeyMsg: '请输入自定义属性',
                errValueStatus: false,
                errValueMsg: '请输入自定义属性'
            }
        ]
    };

    componentWillReceiveProps(nextProps) {
        let custom = nextProps.customFieldsValue;
        if (custom !== null) {
            let customList = [];
            for (let cusKey in custom) {
                customList.push({
                    key: cusKey,
                    value: custom[cusKey],
                    errKeyStatus: false,
                    errKeyMsg: '请输入自定义属性',
                    errValueStatus: false,
                    errValueMsg: '请输入自定义属性'
                });
            }
            this.setState({
                customList
            });
        }
    }

    addCustomField = () => {
        this.setState({
            customList: [...this.state.customList, {key: '', value: '', errKeyStatus: false, errKeyMsg: '请输入自定义属性', errValueStatus: false, errValueMsg: '请输入自定义属性'}]
        })
    };

    handleDelete = (index) => () => {
        let {customList} = this.state;
        let list = List(customList);
        this.setState({
            customList: list.delete(index).toJS()
        });
    };

    handleKey = (index) => (e) => {
        let {customList} = this.state;
        let list = List(customList);
        let key = e.target.value;
        list.update(index, (val) => {
            val.key = key;
            val.value = customList[index].value;
            return val;
        });
        this.setState({
            customList: list.toJS()
        });
    };

    handleValue = (index) => (e) => {
        let {customList} = this.state;
        let list = List(customList);
        let value = e.target.value;
        list.update(index, (val) => {
            val.key = customList[index].key;
            val.value = value;
            return val;
        });
        this.setState({
            customList: list.toJS()
        });
    };

    handleCheckKey = (index, cusKey) => (e) => {
        let {customList} = this.state;
        let list = List(customList);
        let key = cusKey || e? e.target.value : '';
        if (key === '') {
            list.update(index, (val) => {
                val.errKeyStatus = true;
                val.errKeyMsg = '自定义属性名不能为空';
                return val;
            });
        } else {
            list.update(index, (val) => {
                val.errKeyStatus = false;
                val.errKeyMsg = '请输入自定义属性';
                return val;
            });
        }
        this.setState({
            customList: list.toJS()
        });
    };

    handleCheckValue = (index, cusValue) => (e) => {
        let {customList} = this.state;
        let list = List(customList);
        let value = cusValue || e? e.target.value : '';
        if (value === '') {
            list.update(index, (val) => {
                val.errValueStatus = true;
                val.errValueMsg = '自定义属性值不能为空';
                return val;
            });
        } else {
            list.update(index, (val) => {
                val.errValueStatus = false;
                val.errValueMsg = '请输入自定义属性';
                return val;
            });
        }
        this.setState({
            customList: list.toJS()
        });
    };

    handleCheckAll = () => {
        let {customList} = this.state;
        if (customList.length === 0) {
            return true;
        }
        customList.forEach((item, index) => {
            this.handleCheckKey(index, item.key)();
            this.handleCheckValue(index, item.value)();
        });
        return customList.every((item) => {
            return !item.errKeyStatus && !item.errValueStatus
        });
    };

    render() {
        const {classes, isDisabled} = this.props;
        let {customList} = this.state;
        return (
            <div>
                {
                    customList.map((item, index) => {
                        return (
                            <div className={classes.wrap} key={index}>
                                <FormControl className={classes.formControl} disabled={isDisabled} error={item.errKeyStatus}>
                                    <InputLabel>属性名</InputLabel>
                                    <Input
                                        value={item.key}
                                        onChange={this.handleKey(index)}
                                        onBlur={this.handleCheckKey(index)}
                                    />
                                    <FormHelperText>{item.errKeyMsg}</FormHelperText>
                                </FormControl>
                                <FormControl className={classes.formControl} disabled={isDisabled} error={item.errValueStatus}>
                                    <InputLabel>属性值</InputLabel>
                                    <Input
                                        value={item.value}
                                        onChange={this.handleValue(index)}
                                        onBlur={this.handleCheckValue(index)}
                                    />
                                    <FormHelperText>{item.errValueMsg}</FormHelperText>
                                </FormControl>
                                {
                                    isDisabled? (null) : (
                                        <Icon style={{cursor: 'pointer'}} color='secondary' onClick={this.handleDelete(index)}>delete_forever</Icon>
                                    )
                                }
                            </div>
                        )
                    })
                }
                <div className={classes.addCustom}>
                    <Button variant='raised' color="primary" onClick={this.addCustomField}>添加自定义项</Button>
                </div>
            </div>
        )
    }
}

export default AddCustomField;