Невозможно получить доступ к функциям-мутаторам на странице формы мастера при использовании response-final-form - PullRequest
Новая
       6

Невозможно получить доступ к функциям-мутаторам на странице формы мастера при использовании response-final-form

0 голосов
/ 23 марта 2019

Я пытаюсь создать форму мастера с использованием response-final-form, ссылаясь на этот код https://codesandbox.io/s/km2n35kq3v. В моем случае мне нужны некоторые функции-мутаторы, которые будут использоваться внутри моих полей формы. Этот пример иллюстрирует, как это сделать - https://codesandbox.io/s/kx8qv67nk5?from-embed. Я не уверен, как получить доступ к функциям-мутаторам в моих шагах формы, когда я использую форму мастера вместо одной страницы.

Я попытался объединить оба примера, изменив компонент <Form>, предоставленный Wizard.js, для передачи мутаторов. Однако я не могу получить доступ к этим мутаторам на страницах форм мастера.

In Wizard.js 

    return (
      <Form
        mutators={{
          // potentially other mutators could be merged here
          ...arrayMutators,
        }}
        render={({
          handleSubmit,
          submitting,
          values,
          pristine,
          invalid,
          form: {
            mutators: {push, pop, remove},
          },
        }) => {
          return (
            <form onSubmit={handleSubmit}>

Другой файл index.js 


    <Wizard
      initialValues={{ employed: true, stooge: "larry" }}
      onSubmit={onSubmit}
    >
      <Wizard.Page>
        <FieldArray name="customers">
          {({ fields }) =>
            fields.map((name, index) => (
              <div key={name}>
                <label>Cust. #{index + 1}</label>

                <Field
                  name={`${name}.firstName`}
                  component="input"
                  placeholder="First Name"
                />
                <span
                  onClick={() => fields.remove(index)}
                  style={{ cursor: "pointer" }}
                >
                  ❌
                </span>
              </div>
            ))
          }
        </FieldArray>
      </Wizard.Page>
</Wizard>

Выдает ошибки - удаление не определено в index.js

1 Ответ

0 голосов
/ 24 марта 2019

Посмотрите на этот рабочий пример: https://codesandbox.io/s/znzlqvzvnx

внесенные мной изменения:

Wizard.js 

     static Page = ({ children, mutators }) => {
        if(typeof children === 'function'){
          return children(mutators);
        }

        return children;
      };

     ...

     <form onSubmit={handleSubmit}>
       {
          // activePage
          <activePage.type {...activePage.props} mutators={mutators} />
       }

     ...

index.js (только первый <Wizard.page>)) 

      <Wizard.Page>
        {
          ({ upper }) => (
            <React.Fragment>
              <div>
                <label>First Name</label>
                <Field
                  name="firstName"
                  component="input"

                  ...

              </div>
            </React.Fragment>
          )
        }        
      </Wizard.Page>
...