React-Redux, как использовать повторно используемый флажок для отображения данных - PullRequest
Новая
       10

React-Redux, как использовать повторно используемый флажок для отображения данных

0 голосов
/ 05 июля 2019

Меня попросили вмешаться в код 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 значения типа bool, например 

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

, как я передам их на странице сведений, которая НЕ является формой, а "значение" в DepartmentTypeCheckBoxes кажется предопределенным?

Я пока не нашел ничего актуального, и, поскольку у нас плотный график, я хочу попытаться найти решение, насколько это возможно.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 05 июля 2019

Возможно, я неправильно понимаю реализацию вашей формы и вашей страницы сведений, но если вам нужно, чтобы форма существовала точно так, как она выбрана на странице отправки, вы можете увидеть, как отправляются значения этой формы. С помощью этой информации вы можете встроить что-то в существующий редуктор для вашей страницы сведений или создать новый редуктор, который будет содержать эти значения, а затем использовать их позже для отображения страницы ваших данных.

Это , скорее всего, будет считаться неправильным использованием магазина Redux (см. https://goshakkk.name/should-i-put-form-state-into-redux/, почему я считаю, что это может иметь место). Но это будет работать для вашей реализации, насколько я понимаю.

Редактировать : Я должен также упомянуть, что для отображения этих данных вы можете просто отобразить их в том же виде, что и раньше, но отключить флажки, чтобы импортированные предварительно выбранные значения не могли быть изменены.

...