Как вызвать React-хуки или изменить состояние между отдельными функциями в отдельных файлах TSX?

Question

У меня есть 2 файла TSX. Первый называется Stepper.tsx, и он имеет пошаговый пользовательский интерфейс материала, который показывает, на каком этапе формы находится пользователь. Вторым является FormElements.tsx, который содержит различные формы, составляющие шаги. Я хочу изменить степпер в Stepper.tsx в зависимости от того, какая форма / панель развернута и «активна» в FormElements.tsx.

Вот как это выглядит в браузере, чтобы вы получили его суть:

Соответствующий код Stepper.tsx:

import React from 'react';
import './Stepper.css';
import {
    BrowserView,
    MobileView,
} from "react-device-detect";
import StepperComponent from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Typography from '@material-ui/core/Typography';

// Stepper on left rail
function getSteps() {
    return ['Personal', 'Biographic', 'Education', 'Experience', 'Licensure', 'Publications', 'Certify & Submit'];
}

function getStepContent(stepIndex: number) {
    switch (stepIndex) {
        case 0:
            return 'Contact Info, Address, Citizenship, Match Info, Etc.';
        case 1:
            return 'General, Self-Identification, Languages, Military, Etc.';
        case 2:
            return 'Higher Education, Medical Education, Etc.';
        case 3:
            return 'Training, Clinical, Teaching, Etc.';
        case 4:
            return 'State Medical Licenses, Etc.';
        case 5:
            return 'Publications, Etc.';
        case 6:
            return 'Review Your Application, Then Submit';
        default:
            return 'Unknown';
    }
}

export default function Stepper() {

    // stepper
    const [activeStep, setActiveStep] = React.useState(0);
    const steps = getSteps();

    return (

     <div>

        {/* Enables optimized view for desktop */}
        <BrowserView>

        {/* 
        #################################################################
        / The Stepper 
        #################################################################
        */}
        <div className="stepperContainer">
            <StepperComponent activeStep={activeStep} orientation="vertical" className="stepperComponent">
                {steps.map((label, index) => (
                    <Step key={label}>
                        <StepLabel className="stepperLabel">{label}</StepLabel>
                        <StepContent>
                            <Typography className="stepperContent">{getStepContent(index)}</Typography>
                        </StepContent>
                    </Step>
                ))}
            </StepperComponent>  
        </div>
        {/* 
        #################################################################
        / The Stepper 
        #################################################################
        */}

        </BrowserView>

         {/* Enables optimized view for mobile */}
         <MobileView>
             <div className="stepperContainer">
                  The application form.
             </div>
         </MobileView>
     </div>
  );
}

Соответствующий код FormElements.tsx:

export default function FormElements() {
    const [expanded, setExpanded] = React.useState<string | false>('panel1');

    const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, isExpanded: boolean) => {
        setExpanded(isExpanded ? panel : false);
    };


    return (

     <div>

        {/* Enables optimized view for desktop */}
        <BrowserView>

        <div>


            {/* 
            #################################################################
            The Collapsible Form 
            #################################################################
            */}

             <div className="formContainer">
                <div className="formElement1Container">

                {/* 
                #################################################################
                Form Section - Personal Information
                #################################################################
                */}
                    <ExpansionPanel
                                expanded={expanded === 'panel1' && Stepper.setActiveStep(2)}
                                onChange={handleChange('panel1')}
                                defaultExpanded
                    >

Что я выполнение в FormElements.tsx не работает b / c, они разбиты на разные файлы и функции .tsx, поэтому просто попытайтесь выяснить, как правильно это сделать.

Любая помощь будет оценили. Спасибо!

Answer 1

Хорошо, я понял это.

Я использовал use-global-hook , и это стало очень просто.

После установки use-global-hook через

npm install -s use-global-hook

Я создал 2 новых файла в каталоге / src / hooks:

/ src / hooks / storeMainExpansionState / store / index. js содержит номер шага, на котором находится пользователь, и который будет использоваться степпером для выделения соответствующего шага:

import React from "react";
import useGlobalHook from "use-global-hook";

import * as actions from "../act";

const initialState = {
    counter: 0
};


const useGlobal = useGlobalHook(React, initialState, actions);

export default useGlobal;

/ src / hooks / storeMainExpansionState / act / index. js содержит функцию, которую мои панели форм и расширений вызывают для установки этого значения:

export const setCounter = (store,step) => {
    var counter = 0;
    var step = step;

    if (step == 'panel1') {
        counter = 0;
    }
    if (step == 'panel2') {
        counter = 1;
    }
    if (step == 'panel3') {
        counter = 2;
    }
    if (step == 'panel4') {
        counter = 3;
    }
    if (step == 'panel5') {
        counter = 4;
    }
    if (step == 'panel6') {
        counter = 5;
    }
    if (step == 'panel7') {
        counter = 6;
    }

  store.setState({ counter });
};

В моем существующем файле FormElements.tsx я внес следующие изменения:

добавил этот импорт

import useGlobal from "../../../hooks/storeMainExpansionState/store";

добавил это в мою функцию по умолчанию:

const [globalState, globalActions] = useGlobal();

добавил это в мою функцию, которая отключается при расширении панели:

 globalActions.setCounter(panel);

В моем существующем файле Stepper.tsx я сделал следующие изменения:

Я добавил этот импорт:

import useGlobal from "../../../hooks/storeMainExpansionState/store";

Я добавил это объявление в функцию по умолчанию:

const [globalState, globalActions] = useGlobal();

Я добавил это туда, где я возвращаю шаговый компонент и установил активный шаг:

<StepperComponent activeStep={globalState.counter} orientation="vertical" className="stepperComponent">

Теперь это работает, и степпер (Stepper.tsx) выделяет соответствующий активный шаг в зависимости от того, какая панель развернута в основной форме (FormElements.tsx), например:

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

import:

import useGlobal from "../../../hooks/storeMainExpansionState/store";

объявлять:

const [globalState, globalActions] = useGlobal();

звонить:

{globalState.counter}

Easy Peasy.