antdCheckBox联动组件

最新推荐文章于 2023-09-20 14:03:44 发布
奈洛先森
最新推荐文章于 2023-09-20 14:03:44 发布
阅读量1.4k
点赞数
CC 4.0 BY-SA版权
分类专栏： antd
本文链接：https://blog.youkuaiyun.com/CopyCow/article/details/101212247
antd 专栏收录该内容
1 篇文章
订阅专栏
本文详细解析了一个基于React实现的设备故障添加模态框组件代码，阐述了如何使用Ant Design UI库构建复杂表单，以及如何通过状态管理和自定义函数实现动态表单字段的更新和数据绑定。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
import React, {Component} from "react";
import {Button, Card, Row, Form, Col, Input, Modal, Select, DatePicker, Radio, Checkbox, Tag} from "antd";
import Context from "../../../../../../app/context";
import {connect} from "alt-react";
import {brotliDecompress} from "zlib";
import FaultEventStore from "../../../../../../store/FaultEventStore";
import FaultEventAction from "../../../../../../actions/FaultEventAction";
import {getDataItemAsOption, getDataItemAsList, getStationAsOption} from "../../../../../../app/utils";

const Option = Select.Option;
import moment from "moment";
import DataDictStore from "../../../../../../store/DataDictStore";

const FormItem = Form.Item;
const {TextArea} = Input;


class FaultAddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
             
            subListMap: new Map()
        };
        
    }

     
    //所属中心 对应子专业
    selectCheck = (center, subProjectList) => {
        let {subListMap} = this.state;
        const {form} = this.props;
        let centerList = [];
        subListMap.forEach((value, key) => {
            centerList.push(key);
        })
        if (centerList.indexOf(center) != -1) {
            subListMap.delete(center);
        } else {
            if (subProjectList.length > 0) {
                let subs = [];
                centerList.push(center);
                subs.push(subProjectList[0]);
                subListMap.set(center, subs);
            }
        }
        let centList = [];
        subListMap.forEach((value, key) => {
            centList.push(key);
        })
        setTimeout(()=>{
            form.setFieldsValue({
                "center": centList,
                ["subject[" + (() => center)() + "]"]: subListMap.get(center)
            })
        },0);
        this.setState({
            subListMap
        })
    }
    //所属专业
    selectSubCheck = ( center, sub) => {
        const {form} = this.props;
        let {subListMap} = this.state;
        let centerList = [];
        subListMap.forEach((value, key) => {
            centerList.push(key);
        })
        if (centerList.length > 0 && centerList.indexOf(center) != -1) {//有值
            if (subListMap.get(center).length > 0 && subListMap.get(center).indexOf(sub) != -1) {
                let subList = subListMap.get(center);
                let keys = subList.filter(e => e != sub);
                if (keys.length > 0) {
                    subListMap.set(center, keys);
                } else {
                    subListMap.delete(center);
                }
            } else if (subListMap.get(center).length > 0 && subListMap.get(center).indexOf(sub) == -1) {
                let subList = subListMap.get(center);
                subList.push(sub);
                subListMap.set(center, subList);
            } else {
                //新加入
                let subList = [];
                subList.push(sub);
                subListMap.set(center, subList);
            }
        } else {
            let subs = [];
            subs.push(sub);
            subListMap.set(center, subs);
        }

        let centList = [];
        subListMap.forEach((value, key) => {
            centList.push(key);
        })
        setTimeout(()=>{
            form.setFieldsValue({
                "center": centList,
                ["subject[" + (() => center)() + "]"]: subListMap.get(center)
            })
        },0);
        this.setState({
            subListMap
        })
    }

    render() {
        let divStyle = {
            paddingLeft: "2px",
            paddingRight: "2px",
            width: "100%",
            textAlign: "center",
            lineHeight: "50px",
            height: '50px',
        };
        let rowStyle = {
            paddingLeft: "2px",
            paddingRight: "2px",
            width: "100%",
            borderTop: "1px solid #ccc",
            borderLeft: "1px solid #ccc",
            borderRight: "1px solid #ccc"
        };
        let rowTopStyle = {
            paddingLeft: "2px",
            paddingRight: "2px",
            width: "100%",
            borderTop: "1px solid #ccc",
            borderLeft: "1px solid #ccc",
            borderRight: "1px solid #ccc"
        };
        let rowBottomStyle = {
            paddingLeft: "2px",
            paddingRight: "2px",
            width: "100%",
            border: "1px solid #ccc"
        };
        let radiusStyle = {
            verticalAlign: "middle",
            textAlign: "center",
            borderRadius: "0",
            width: "99%",
        };
        let formItemStyle = {
            textAlign: "center",
            marginBottom: "0px"
        };
        let colStyle = {
            borderRight: "1px solid #ccc",
            lineHeight: "50px",
            height: "50px"
        };
        let colRightStyle = {
            lineHeight: "50px",
            height: "50px"
        }
        const componentWidth = {
            width: "95%"
        };
        const unShowFormItemStyle = {
            textAlign: "center",
            marginBottom: "0px",
            display: "none"
        };
        const radioStyle = {
            display: "inline",
            height: "30px",
            lineHeight: "30px"
        };
        let textAreaStyle = {
            verticalAlign: "middle",
            textAlign: "left",
            borderRadius: "0",
            width: "99%",
        };
        const unShowDiv = {
            paddingLeft: "2px",
            paddingRight: "2px",
            width: "100%",
            textAlign: "center",
            lineHeight: "36px",
            display: "none"
        };
        let {onCancel} = this.props;
        let {isNotFault, initFaultCategory, isShowHappenPlace,subListMap} = this.state;
        
        const {getFieldDecorator} = this.props.form;
        
        let centList = [];
        subListMap.forEach((value, key) => {
            centList.push(key);
        })

        let subCenterList = DataDictStore.getState().recordDetail.get("data").toArray();
        let subCenter = [];
        for (let i = 0; i < subCenterList.length; i++) {
            if (!subCenterList[i].isParent) {
                //无子选项
                continue;
            }
            let style = rowTopStyle;
            if (i == subCenterList.length - 1) {
                style = rowBottomStyle;
            }
            let subProjectList = subCenterList[i].subType == null ? [] : subCenterList[i].subType.split(",");
            subCenter.push(
                <Row style={style}>
                    <Col span={5} style={colStyle}>
                        <Checkbox key={i} value={subCenterList[i].paramName}
                                  onChange={() => this.selectCheck(subCenterList[i].paramName, subProjectList)}>
                            {subCenterList[i].paramName}
                        </Checkbox>
                    </Col>
                    <Col span={19} style={{
                        textAlign: "left",
                        padding: "2px",
                        marginBottom: "0px",
                        lineHeight: "50px",
                        height: "50px"
                    }}>
                        {getFieldDecorator(`subject[${subCenterList[i].paramName}]`, {
                            initialValue: subListMap.get(subCenterList[i].paramName),
                            rules: [
                                {
                                    required: fieldMapping.subject == "true",
                                    message: "不能为空"
                                }
                            ]
                        })
                        (
                            <Checkbox.Group style={{width: "100%"}}
                            >
                                {
                                    subCenterList[i].subType == null ? '' : subCenterList[i].subType.split(",").map((item, index) => {
                                        return (
                                            <Col span={4}>
                                                <Checkbox key={item} value={item}
                                                          onChange={() => this.selectSubCheck( subCenterList[i].paramName, item)}
                                                >
                                                    {item}
                                                </Checkbox>
                                            </Col>
                                        );
                                    })
                                }
                            </Checkbox.Group>
                        )}
                    </Col>
                </Row>
            );
        }

        return (
            <Modal
                visible={true}
                title="添加设备故障/事件"
                onCancel={onCancel}
                footer={null}
                width={1000}
            >
                <Form>
                    <Card style={{backgroundColor: "#FAFAFA"}}>

                       
                        <Row style={rowStyle}>
                            <Col span={5} style={colStyle}>
                                <div style={divStyle}> 所属中心</div>
                            </Col>
                            <Col span={19} style={colRightStyle}>
                                <div style={divStyle}> 所属专业</div>
                            </Col>
                        </Row>
                        <Row style={rowStyle}>
                            <Col span={24}>
                                <FormItem style={{
                                    padding: "2px",
                                    textAlign: "center",
                                    marginBottom: "0px"
                                }}>
                                    {getFieldDecorator("center", {
                                        initialValue: centList,
                                        rules: [
                                            {
                                                required: fieldMapping.center == "true",
                                                message: "不能为空"
                                            }
                                        ]
                                    })(
                                        <Checkbox.Group style={{width: "100%"}}>
                                            {subCenter}
                                        </Checkbox.Group>
                                    )}
                                </FormItem>
                                <FormItem
                                    style={{
                                        textAlign: "left",
                                        padding: "2px",
                                        marginBottom: "0px",
                                        lineHeight: "50px",
                                        height: "50px"
                                    }}
                                >

                                </FormItem>
                            </Col>
                        </Row>
                       
                    </Card>
                </Form>
            </Modal>
        );
    }
}

const FaultAddModalForm = Form.create()(FaultAddModal);
export default FaultAddModalForm;
记录一下，非常坑的setFieldsValue，setFieldsValue设置值无法强制刷新页面值，需要加setTimeOut进行两次刷新