Создавать поля на основе ответа сервера и динамически устанавливать начальные значения - PullRequest
Новая
       12

Создавать поля на основе ответа сервера и динамически устанавливать начальные значения

0 голосов
/ 19 марта 2020

Я использую React и Formik. У меня есть одна форма, и я генерирую несколько полей на основе ответа сервера.

Ответ выглядит следующим образом: 

[
  {id: 1, type: 'STRING', label: 'string'},
  {id: 2, type: 'NUMBER', label: 'number'},
  ........
]

Я должен отобразить текстовое поле в случае типа: ' STRING ', числовое поле в случае типа:' NUMBER 'и нескольких других типов.

Рендеринг прост, но каким будет правильный способ сделать их управляемыми входами?

на данный момент у меня вот так: 

const initialValues = {
 params: []
}

const ParamsForm = () => (
    <Formik
      initialValues={initialValues}
      onSubmit={() => {}
    >
      {props => (
        <form onSubmit={props.handleSubmit}>
         {serverResponse.map(param => {
            switch(param.type){
              case 'NUMBER':
               return <input 
                        type='number' 
                        name='param.label'
                        onChange={handleChange}
                        value=??? // How should I bind this value to be controlled?
                      />
              case 'STRING':
               return <input 
                        type='text' 
                        name='param.label'
                        onChange={handleChange}
                        value=??? // How should I bind this value to be controlled?
                      />
            }
         })}
          <button type="submit">Submit</button>
        </form>
      )}
    </Formik>
);

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

[
  {id: 1, type: 'STRING', label: 'string', value: 'inputValue'},
  {id: 2, type: 'NUMBER', label: 'number', value: 'inputValue'},
  ........
]

Так что каждый при изменении Событие полей Я должен добавить эти объекты в мой массив params, а затем отправить этот массив на сервер. Мне удается сделать это с помощью setFieldValue и моей пользовательской функции handleChange, но это кажется неправильным. Пожалуйста, предоставьте хорошее решение, если можете.

...