时间戳

首页 > 解决方案 > react-final-form 字段的动态名称

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

问题描述

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

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

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

标签： react-final-form

解决方案

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.

推荐阅读