react-final-form - react-final-form 字段的动态名称

Question

我有 2 个表格。当我在第一个表单上选择一个选项时，第二个表单将添加到页面中，其中包含从后端检索的参数。现在如何将参数名称设置为 react-final-form 字段名称？

我找不到办法做到这一点。在哪里传递参数名称？

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

Answer 1

React Final Form calls your onSubmit function with the values from all the fields in your form. It's totally up to you to transmit the values to your server.

If you're asking how to build the second form, you just add the fields you need to add. So, say you got back from the server that you needed three fields: [ 'name', 'startTime', 'endTime' ]. You'd just loop through that array and add the fields.

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

Does that help? You don't have to "pass parameters to the form", you just add the Field components that you need.

Answer 2

像这样调用 FinalForm

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

和 FinalForm 是

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)}</pre>
      </form>
    )}
  />
)

const rootElement = document.getElementById("root");
ReactDOM.render(<FinalForm onSubmit={() => (<div/>)} fieldsFromServer={["firstName", "lastName"]} />, rootElement);