Как привязать страницы формы к пошаговой индикации выполнения - PullRequest
Новая
       15

Как привязать страницы формы к пошаговой индикации выполнения

0 голосов
/ 16 апреля 2020

Здравствуйте, я новичок в React / JS, и я создал пошаговый индикатор выполнения React, и теперь я хочу привязать свои формы к этому индикатору, поэтому, когда я нажимаю «Далее», появляются другие формы. Дело в том, что я не знаю, как это сделать. Stepper и мои формы находятся в этой песочнице (стиль плохо показывает, но работает), можете ли вы рассказать мне, как привязать мои формы к моим шагам? Вот код: https://codesandbox.io/s/tsx-rj694

(Stepper используется в CreateJob. js Конструктор форм и формы находятся в отдельной папке)

Редактировать: Некоторые части кода: (CreateJob. js) 

import React, { Component } from "react";
import Stepper from "./Stepper.js";
import "./StepperButton.scss";
// import { MainInfo } from './JobForms/MainInfo/MainInfo.tsx'
// import {Accepted} from './JobForms/Accepted/Accepted.js'
// import {Details} from './JobForms/Details/Details.tsx'
// import {AdditionalInfo} from './JobForms/AdditionalInfo/AdditionalInfo.tsx'
// import {Confirmation} from './JobForms/Confirmation/Confirmation.js'
class CreateJob extends Component {
  constructor() {
    super();
    this.state = {
      currentStep: 1
    };
  }

  handleClick = clickType => {
    const { currentStep } = this.state;
    let newStep = currentStep;
    clickType === "next" ? newStep++ : newStep--;
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  };

  render() {
    const stepsArray = [
      "ÙرÙد اطÙاعات اÙÙÛÙ",
      "تÙضÛحات Ùرصت شغÙÛ",
      "ÙÛازÙÙØ¯Û Ùا",
      "تاÛÛد اطÙاعات",
      "ثبت"
    ];

    const { currentStep } = this.state;
    // const {Title,ActivationDate,ExpirationDate,DirectManager,HRBP,Detailss,MinE,WType,Address,Department,Salary } = this.Formstate;
={Title,ActivationDate,ExpirationDate,DirectManager,HRBP,Detailss,MinE,WType,Address,Department,Salary}
    return (
      <div>
        <Stepper steps={stepsArray} currentStepNumber={currentStep - 1} />

        <div className="buttons-container">
          <button onClick={() => this.handleClick()} className="previous">
            ÙبÙÛ
          </button>
          <button
            form="my-form"
            type="submit"
            onClick={() => this.handleClick("next")}
            className="next"
          >
            اداÙÙ
          </button>
        </div>
      </div>
    );
  }
}

export default CreateJob;

Степпер: 

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './Stepper.scss'
class Stepper extends Component {
  constructor () {
    super()
    this.state = {
      steps: []
    }
  }

  componentDidMount () {
    const { steps, currentStepNumber } = this.props
    const stepsState = steps.map((step, index) => {
      const stepObj = {}
      stepObj.description = step
      stepObj.completed = false
      stepObj.highlighted = index === 0
      stepObj.selected = index === 0
      return stepObj
    })
    const currentSteps = this.updateStep(currentStepNumber, stepsState)
    this.setState({
      steps: currentSteps
    })
  }

  componentDidUpdate (prevProps) {
    if (prevProps.currentStepNumber !== this.props.currentStepNumber) {
      const { steps } = this.state
      const currentSteps = this.updateStep(this.props.currentStepNumber, steps)

      this.setState({
        steps: currentSteps
      })
    }
  }

  updateStep (stepNumber, steps) {
    const newSteps = [...steps]
    let stepCounter = 0

    while (stepCounter < newSteps.length) {
      // current step
      if (stepCounter === stepNumber) {
        newSteps[stepCounter] = {
          ...newSteps[stepCounter],
          highlighted: true,
          selected: true,
          completed: false
        }
        stepCounter += 1
      }

      // past step
      else if (stepCounter < stepNumber) {
        newSteps[stepCounter] = {
          ...newSteps[stepCounter],
          highlighted: false,
          selected: true,
          completed: true
        }
        stepCounter += 1
      }

      // future step
      else {
        newSteps[stepCounter] = {
          ...newSteps[stepCounter],
          highlighted: false,
          selected: false,
          completed: false
        }
        stepCounter += 1
      }
    }
    return newSteps
  }

  render () {
    const { steps } = this.state
    const stepsDisplay = steps.map((step, index) => {
      return (
        <div className='step-wrapper' key={index}>
          <div className={`step-number ${step.selected ? 'step-number-active' : 'step-number-disabled'}`} style={{ fontFamily: 'IranSans' }}>{step.completed ? <span style={{ fontFamily: 'IranSans' }}> &#10003; </span> : index + 1}</div>
          <div className={`step-description ${step.highlighted && 'step-description-active'}`} style={{ fontFamily: 'IranSans', fontSize: '14px' }}>{step.description}</div>
          <div className={index !== steps.length - 1 ? 'divider-line' : ''} />
        </div>

      )
    })

    return (
      <>
        <div className='stepper-container-horizontal'>
          <div className='stepper-wrapper-horizontal'>
            {stepsDisplay}
          </div>
        </div>
      </>
    )
  }
}

Stepper.propTypes = {
  steps: PropTypes.array.isRequired
}
export default Stepper

остальные - это формы, загружаемые в песочницу

...