Question

我被要求篡改React-Redux代码（目前了解很少）并更新同事的前端代码。该应用程序的功能之一是让管理员创建警报通知，并将其分发到不同部门。这些部门被选中，最后带有一个“发送”按钮，它们会警告所有相关人员。具有所有必填字段的表单将保存在数据库中。通知详细信息页面包含我们应该生成的详细信息和样机，所涉及的部门具有相同形式的分组复选框（以及其选中/未选中状态）。我的同事创建了一个可重复使用的组件，如下所示：

import React from "react";
import { connect } from "react-redux";
import {reset, change, registerField } from "redux-form";
import _ from "lodash";
import DepartmentTypeCheckBoxes from "./ThreatTypeCheckBoxes";
import { setNotifView, setNotifViewForm } from "Actions/notifView.action";
import { Label } from "reactstrap";
import { ICustomProps } from "Entities/baseForm";

interface INotificationState { 
    notifStatus?: boolean;

 }

interface IProps extends ICustomProps {
    registerField(): void;
    resetForm(): void;
    changeField(value: any): any;
    setNotifView(view: any): void;
    setNotifViewForm(form: any): void;
}

class DepartmentType extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
        };
        this.onFieldChange = this.onFieldChange.bind(this);
    }

    public componentWillMount() {
        this.props.registerField();
    }

    public onFieldChange() {
        if(this.state.status && this.state.status == true){
            this.setState({ status: false })
            this.props.changeField(false);
        }
        else{
            this.setState({ status: true })
            this.props.changeField(true);
        }
    }
    public componentWillReceiveProps(nextProps: IProps , nextState: IState) {

    }

    public render() {      
        return (
            <div className="form-group">
            <div className="f" >
                <Label for="type">Department Types</Label>
                <div className="">
                    <div className="">
                        <DepartmentTypeCheckBoxes id="1" value="option1" label="Development" fieldName="development" formName="CreateAlertNotification"></DepartmentTypeCheckBoxes>
                    </div>
                    <div className="">
                        <DepartmentTypeCheckBoxes id="2" value="option2" label="Human resources" fieldName="humanResources" formName="CreateAlertNotification"></DepartmentTypeCheckBoxes>
                    </div>
                    <div className="">
                        <DepartmentTypeCheckBoxes id="3" value="option3" label="Consultance" fieldTag="consultance" formTag="CreateAlertNotification"></DepartmentTypeCheckBoxes>
                    </div>
                </div>
                <div className="">
                        <div className="">
                    <div className="">
                        <DepartmentTypeCheckBoxes id="4" value="option4" label="Logistics" fieldTag="logistics" formTag="CreateAlertNotification"></DepartmentTypeCheckBoxes>
                    </div>
                    </div>
                    <div className="">
                        {this.props.children && this.props.children}
                    </div>
                </div>                  
            </div>
        </div>
        );
    }
}

const mapStateToProps = (state: any, ownProps: ICustomProps) => {
    return {
    };
};

const mapDispatchToProps = (dispatch: any, ownProps: ICustomProps) => {
    const formTag = ownProps.formTag;
    const fieldTag = ownProps.fieldTag;
    return {
        registerField: () => dispatch(registerField(formTag, fieldTag, "FieldArray")),
        changeField: (value: any) => dispatch(change(formTag, fieldTag, value, false, false)),
        setNotifView: (view: any) => dispatch(setNotifView(view)),
        setNotifViewForm: (form: any) => dispatch(setNotifViewForm(form)),
        resetFields: () => dispatch(reset("CreateAlertNotification")),        
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(DepartmentType);

并在提交表单中使用它，如下所示：

                        <Row>
                            <Col md="6">
                            { initialValues.ShowDepartmentBoxes &&
                                <DepartmentType fieldTag="DepType" formTag="CreateAlertNotification">
                                <Field name="AnotherCustomField" className="form-control" component={renderField} type="text" label="General Information" />
                                </DepartmentType>
                            }
                            </Col>
                            <Col md="6">
                                <AnotherCustomField fieldTag="SomeFieldName" formTag="CreateAlertNotification" Mode="create"/>
                            </Col>
                        </Row>

我想在“通知详细信息”页面中使用相同的DepartmentType字段，并将值从数据库加载到通知对象中。假设我有4个布尔值，例如

notification.IsHumanResourcesAlerted
notification.IsDevelopmentAlerted,
notification.IsLogisticsAlerted,
notification.IsConsultanceAlerted

如何在非表单的详细信息页面中传递它们，并且DepartmentTypeCheckBoxes中的“值”似乎是预定义的？

我还没有找到任何相关的东西，并且由于我们的时间紧迫，我想尝试并提出一个解决方案。任何帮助表示赞赏。

Answer 1

我可能会误解您的表单和详细信息页面的实现，但是如果您需要表单与在发送页面上选择的表单完全相同，则可以看到该表单的值是如何分派的。有了这些信息，您就可以在详细信息页面的现有化简工具中构建某些内容，或者创建一个包含这些值的新化简工具，然后在以后使用它们显示您的详细信息页面。

此最有可能被认为是Redux存储的不当使用（有关为什么我认为可能是这种情况，请参见https://goshakkk.name/should-i-put-form-state-into-redux/）。但据我所知，它将对您的实现有用。

编辑：我还应该提到，要显示此数据，您可以将其显示为与以前相同的形式，但是请禁用复选框，以使导入的预选值无法更改。

React-Redux如何使用可重用复选框组件显示数据

1 个答案: