Как настроить многошаговую форму в React?
У меня есть многоступенчатая форма в React, на каждом шаге вы должны вводить информацию.
Шаг 1: ...некоторая информация и выбор языков (вы можете выбрать несколько языков) Шаг 2: ... немного информации Шаг 3: ...некоторая информация о загрузке Шаг 4: Пользователи отвечают на конкретный вопрос, этот вопрос должен отображаться на всех языках, выбранных пользователем.
например: если пользователь выбрал английский и французский языки, тогда пользователь ответит на вопрос на английском языке, затем нажмет «Сохранить/Далее», а затем ответит на вопрос на французском языке.
Шаг 5: подтвердите
По умолчанию страница находится на шаге 1, пользователь может перейти к следующему шагу, нажав кнопку «Сохранить/Далее», а затем шаг состояния увеличивается, и отображается шаг 2, я не могу понять поток для шага 4, это будет похоже на многоступенчатая форма внутри многоступенчатой формы, которая звучит неправильно.
Поэтому, если кто-нибудь знает, как сделать шаг 4 лучше, пожалуйста, помогите мне.
Заранее спасибо.
один маршрут подойдет
Как вы сказали, поскольку вы хотите сделать несколько шагов на шаге 4, вам придется разбить его на подшаги. Вы можете создать новый степпер внутри шага 4, который будет проходить по каждому языку и показывать вопросы на них.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Первоначально у вас может быть несколько шагов, как показано ниже
switch(step) {
case 1:
return(
<FirstStep
handleCaseNumber = {this.handleCaseNumber}
handleChangeEvent = {this.handleChangeEvent}
values = {values}
/>
)
case 2:
return(
<SecondStep
nextStep = {this.nextStep}
prevStep = {this.prevStep}
handleClientVerification = {this.handleClientVerification}
handleChangeEvent = {this.handleChangeEvent}
values = {values}
/>
)
case 3:
return(
<ThirdStep
nextStep = {this.nextStep}
prevStep = {this.prevStep}
handleAccessToken = {this.handleAccessToken}
handleChangeEvent = {this.handleChangeEvent}
values = {values}
/>
)
case 4:
return(
<FourthStep
nextStep = {this.nextStep}
handleChangeEvent = {this.handleChangeEvent}
values = {values}
/>
)
}
После этого в компоненте FourthStep у вас могут быть такие шаги как дочерние.
switch(step) {
case 1:
return(
<ChildStepOne
handleCaseNumber = {this.handleCaseNumber}
handleChangeEvent = {this.handleChangeEvent}
values = {values}
/>
)
case 2:
return(
<ChildStepTwo
nextStep = {this.nextStep}
prevStep = {this.prevStep}
handleClientVerification = {this.handleClientVerification}
handleChangeEvent = {this.handleChangeEvent}
values = {values}
/>
)
}
вы можете следовать этой структуре в зависимости от ваших потребностей.
Да, это может работать нормально, но я не уверен, сколько языков выберет пользователь, поэтому внутри компонента четвертого шага я не могу указать ограничение шагов, которое может быть 10 или может быть всего 1.
Да, тогда сделайте шаги динамическими в зависимости от выбора языка. Чтобы получить данные о выборе языка на всех этапах, используйте contextAPI.
вы хотите решить эту проблему, используя один маршрут или несколько маршрутов?