0

我需要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>

目前它看起来像：

在此处输入图像描述

我需要它看起来像这样： 在此处输入图像描述

4

2 回答 2

1

在 fields 数组中，您可以再添加一个键isVisible。

它看起来像这样：

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

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

<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键。

于 2018-11-21T10:19:44.143 回答
0

找到下面的代码。

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;

在此处检查代码框链接

于 2018-11-21T12:35:04.397 回答