添加多个表单域但一次只显示一个

Question

我需要 final-form 才能添加表单字段记录数组。但是一次只想显示数组的一个字段。就像在左侧，我将有客户 id 或 index，哪个用户将 select，而在右侧，我必须显示与该 index 相对应的客户。我可以添加 reac-final-form-array，但它总是显示所有数组元素。仅显示 selected 客户的正确方法应该是什么。

请检查以下代码以供参考。希望我的问题很清楚，如果没有请告诉我，会添加更多解释。

<FieldArray name="customer">
  {({ fields }) => (
    fields.map((name, index) => (
      <div key={index}>
        <Field name={`${name}.firstName`} />
        <Field name={`${name}.lastName`} />
      </div>
    ))
  )}
</FieldArray>

添加新客户：

<div className="buttons">
  <button
    type="button"
    onClick={() => push('customers', undefined)}>
    Add Customer
  </button>
</div>

目前看起来像：

我需要它看起来像这样：

Answer 1

在fields数组中，可以多加一个键isVisible。

它看起来像这样：

fields = [
    {
        firstName: 'John',
        lastName: 'Doe',
        isVisible: true,
    },
    {
        firstName: 'Jane',
        lastName: 'Doe',
        isVisible: false,
    }
];

现在显示时，仅在 isVisible 为真时渲染字段，

<FieldArray name="customer">
  {({ fields }) => (
    fields.map((name, index) => {
      if(name.isVisible){
        return (
          <div key={index}>
            <Field name={`${name}.firstName`} />
            <Field name={`${name}.lastName`} />
          </div>
      );
    ))
  )}
</FieldArray>

您可以通过单击 Cust # 按钮来控制 isVisible 键。

Answer 2

找到下面的代码。

import React from "react";
import { Form, Field } from "react-final-form";
import arrayMutators from "final-form-arrays";
import { FieldArray } from "react-final-form-arrays";

const onSubmit = () => {
  console.log("submitted");
};

const validate = () => {
  // console.log("validated");
};

const MyForm = () => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // potentially other mutators could be merged here
      ...arrayMutators
    }}
    validate={validate}
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <FieldArray name="customers">
          {({ fields }) => (
            <div>
              <button
                type="button"
                onClick={() =>
                  fields.push({ firstName: "", lastName: "", isVisible: true })
                }
              >
                Add Customer
              </button>
              {fields.map((name, index) => (
                <div key={name}>
                  <a
                    onClick={() =>
                      (fields.value[index].isVisible = !fields.value[index]
                        .isVisible)
                    }
                  >{`Cust #${index}`}</a>
                  {fields.value[index].isVisible ? (
                    <div>
                      <div>
                        <Field name={`${name}.firstName`} component="input" />
                      </div>
                      <div>
                        <Field name={`${name}.lastName`} component="input" />
                      </div>
                    </div>
                  ) : null}
                  <button type="button" onClick={() => fields.remove(index)}>
                    Remove
                  </button>
                </div>
              ))}
            </div>
          )}
        </FieldArray>
      </form>
    )}
  />
);

export default MyForm;

检查codesandbox link here

添加多个表单域但一次只显示一个

Add multiple form fields but show only one at a time

reactjs

react-final-form

react-final-form-arrays