Добавить несколько полей формы, но показывать только по одному за раз

Question

Мне нужно final-form, чтобы иметь возможность добавлять массив записей полей формы.Но хотите отображать только одно поле массива за раз.Как и слева, у меня будет клиент id или index, которого выберет пользователь, а справа я покажу клиента, соответствующего этому index.Я могу добавить reac-final-form-array, но он всегда показывает все элементы массива.Какой должен быть правильный подход, чтобы показывать только выбранного клиента.

Пожалуйста, проверьте код ниже для справки.Надеюсь, мой вопрос ясен, если нет, пожалуйста, дайте мне знать, добавит больше объяснений.

<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

Найдите приведенный ниже код.

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;

Проверьте код и ссылку в окне здесь

Answer 2

В массиве полей вы можете добавить еще один ключ 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>

Вы можете управлять ключом isVisible , нажав кнопку Cust # .