Динамическое имя для поля реакции-финальной формы - PullRequest
Новая
       10

Динамическое имя для поля реакции-финальной формы

2 голосов
/ 01 июня 2019

У меня есть 2 формы. Когда я выбираю опцию в первой форме, вторая страница добавляется на страницу с параметрами, полученными из бэкэнда. Теперь, как я могу установить имена параметров в качестве имен полей response-final-form?

Я не мог найти способ сделать это. Куда передавать имена параметров? 

  <Form
    onSubmit={onSubmit}
    validate={validate}

Ответы [ 2 ]

2 голосов
/ 01 июня 2019

React Final Form вызывает вашу функцию onSubmit со значениями из всех полей вашей формы.Передача значений на ваш сервер полностью зависит от вас.

Если вы спрашиваете, как создать вторую форму, просто добавьте поля, которые нужно добавить.Итак, скажем, вы вернулись с сервера, что вам нужно три поля: [ 'name', 'startTime', 'endTime' ].Вы просто просматриваете этот массив и добавляете поля. 

<Form onSubmit={onSubmit}>({handleSubmit}) => (
  <form onSubmit={handleSubmit}>
    {fieldsFromServer.map(fieldName => (
      <div key={fieldName}>
        <label>{fieldName}</label>
        <Field name={fieldName} component="input"/>
      </div>
    ))}
  </form>
)}<Form>

Помогает ли это?Вам не нужно «передавать параметры в форму», вы просто добавляете необходимые компоненты Field.

0 голосов
/ 12 июня 2019

Вызовите FinalForm как 

<FinalFieldArrayForm onSubmit={this.handleSubmitTemplate} fieldsFromServer={parameters} />

и FinalForm 

<code>import React from "react";
import ReactDOM from "react-dom";
import { Form, Field } from 'react-final-form'
import arrayMutators from 'final-form-arrays'
import { FieldArray } from 'react-final-form-arrays'

import "./styles.css";

const FinalForm = ({onSubmit, fieldsFromServer}) => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // potentially other mutators could be merged here
      ...arrayMutators
    }}
    render={({
      handleSubmit,
      form: {
        mutators: { push, pop }
      },
      pristine,
      form,
      submitting,
      values
    }) => (
      <form onSubmit={handleSubmit}>
        <div className="buttons">
          <button type="button" onClick={() => push('records', undefined)}>+</button>
          <button type="button" onClick={() => pop('records')}>-</button>
          <button type="button" onClick={form.reset} disabled={submitting || pristine}>Reset</button>
        </div>
        <FieldArray name="records">
        { ({fields}) => (
          <div>
          {fields.map( (name, index) => (
            <div key={`${name}.${index}`}>
              <label>{index + 1}</label>
              {fieldsFromServer.map( param => <Field key={`${name}.${param}`} name={`${name}.${param}`} component="input" placeholder={`${name}.${param}`} /> )}
              <button type="button" onClick={() => fields.remove(index)}>-</button>
              <button type="button" onClick={() => fields.insert(index+1)}>+</button>
            </div>
          ))}
          </div>
        )}
        </FieldArray>
        <div className="buttons">
          <button type="submit" disabled={submitting || pristine}>Submit</button>
        </div>
        <pre>{JSON.stringify(values, 0, 2)}
)} /> ) const rootElement = document.getElementById ("root"); ReactDOM.render ( (
)} fieldsFromServer = {["firstName", "lastName"]} />, rootElement);
...