Введите окончательную форму: создайте условия в соответствии со значениями формы

Question

Мне нужно сгенерировать определенное количество полей в соответствии со значением, которое пользователь запрашивает на первом шаге формы.

Поскольку я делаю многоэтапную форму с классом "Wizard", <Condition /> компонент не работает.

По сути, мне нужно получить доступ к значениям (вытащить их из класса внутри функционального компонента), чтобы указать Реагировать количество «страниц», которое необходимо сгенерировать.

Примерно так:

export default () => {(
        <Wizard
            initialValues={{ }}
            onSubmit={onSubmit}
        >
            <Wizard.Page >
                <FirstStep />
            </Wizard.Page>

        {values.items.map((item, index) => (
            <Wizard.Page key="index">
                <SecondStep stepName="item.name" key="index" />
            </Wizard.Page>
        ) )}

        </Wizard>
)}

Чтобы сгенерировать N страниц в соответствии с количеством элементов, созданных пользователем, по одной странице для каждого элемента.

Этот подход делает не работает, потому что он говорит мне, что значения не определены.

Это мой Wact React Component:

import React from 'react'
import PropTypes from 'prop-types'
import { Form } from 'react-final-form'
import arrayMutators from 'final-form-arrays'

export default class Wizard extends React.Component {
   static propTypes = {
       onSubmit: PropTypes.func.isRequired
   }
   static Page = ({ children }) => children

   constructor(props) {
       super(props)
       this.state = {
           page: 0,
           values: props.initialValues || {}
       }
   }
   next = values =>
       this.setState(state => ({
           page: Math.min(state.page + 1, this.props.children.length - 1),
           values
       }))

   previous = () =>
       this.setState(state => ({
           page: Math.max(state.page - 1, 0)
       }))

   validate = values => {
       const activePage = React.Children.toArray(this.props.children)[
           this.state.page
       ]
       return activePage.props.validate ? activePage.props.validate(values) : {}
   }

   handleSubmit = values => {
       const { children, onSubmit } = this.props
       const { page } = this.state
       const isLastPage = page === React.Children.count(children) - 1
       if (isLastPage) {
           return onSubmit(values)
       } else {
           this.next(values)
       }
   }

   render() {
       const { children } = this.props
       const { page, values } = this.state
       const activePage = React.Children.toArray(children)[page]
       const isLastPage = page === React.Children.count(children) - 1
       return (
           
               {({ handleSubmit, submitting, values }) => (
                   

                       {activePage}

                       
                           {page > 0 && « Previous }
                           {!isLastPage && Next »}
                           {isLastPage && Submit}
                       

                       {JSON.stringify(values, 0, 2)}

)} )}}

А это компонент FirstStep (куда пользователь вставляет его первые значения, он генерирует и массив элементов. Все, что мне нужно сделать, это извлечь значения состояния, чтобы сгенерировать количество страниц в соответствии с длиной этого первого массива):

export default () => (

            <FieldArray name="items">
                {({ fields }) => (
                <div className="centered-items">
                    {fields.map((name, index) => (
                        <div key={name} className="item-row">
                            <label htmlFor={`item-name-${index}`}>item: </label>
                            <Field
                                id={`item-name-${index}`}
                                name={`${name}.item`} 
                                component="input"
                                type="text"
                                placeholder="Place Item Name"
                            />
                            <button type="button" onClick={() => fields.remove(index)}>
                                Remove
                            </button>
                        </div>
                    ))}
                    <button
                        className="centered"
                        type="button"
                        onClick={() => fields.push({ tipologia: '', numero_camere: '1' })}
                    >
                        Add Item
                    </button>
                </div>
                )}
            </FieldArray>
)

Answer 1

Мне удается решить эту проблему, вызывая метод React.cloneElement(). Этот метод должен обернуть переменную activePage и метод stati c " Page ", чтобы вы могли передавать свойства дочерним элементам, поэтому по крайней мере мне удалось получить доступ к форме значения внутри каждой страницы, и поэтому создают некоторые условия.

Вы можете увидеть рабочий пример здесь: Демонстрация - Codesandbox

Я до сих пор не понял, как получить доступ к этим значениям за пределами страницы (внутри Wizard Class, но до этого Метод Wizard.Page, это может быть идеальным способом, потому что я могу создавать условия для того, чтобы генерировать / (или не генерировать) страницы.