ReactJS Javascript-动态添加/删除表单中的输入行

Question

我目前正在开发一个需要生成动态表单的Web应用程序，在这里我可以按“添加”或“删除”按钮来添加或删除表单中的模型实例。例如，表单的结构如下：

公司名称：...地址： ...电话号码：...

（（下面是我需要动态添加和删除实例的部分，因为可能有来自一家公司的多个POC）

POC1名称：...POC1电子邮件：...POC1电话号码：...

POC2名称：...POC2电子邮件：...POC2电话号码：...

等

我遇到了如何执行此示例（https://codesandbox.io/s/wonderful-lichterman-br63z?file=/index.js）的示例，但是我似乎无法理解代码的某些部分。我是Java语言的新手，并且使用ReactJS作为应用程序的前端。以下是代码段

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Col, Row } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";

const rules = [{ required: true }];

const DynamicFieldSet = () => {
  const onFinish = values => {
    console.log("Received values of form:", values);
  };

   return (
     <Form onFinish={onFinish} className="my-form">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          /**
           * `fields` internal fill with `name`, `key`, `fieldKey` props.
           * You can extends this into sub field to support multiple dynamic fields.
           */
          return (
            <div>
              {fields.map((field, index) => (
                <Row key={field.key}>
                  <Col>
                    <Form.Item
                      name={[field.name, "lastName"]}
                      fieldKey={[field.fieldKey, "lastName"]}
                      rules={rules}
                    >
                      <Input placeholder="last name" />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      name={[field.name, "firstName"]}
                      fieldKey={[field.fieldKey, "firstName"]}
                      rules={rules}
                    >
                      <Input placeholder="first name" />
                    </Form.Item>
                  </Col>
                  <Col flex="none">
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  </Col>
                </Row>
               ))}
              <Form.Item>
                 <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: "100%" }}
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
      );
    };

ReactDOM.render(<DynamicFieldSet />, document.getElementById("container"));

我不太清楚'fields'变量来自何处，以及'index'变量从何处来。此外，在没有任何显式调用的情况下如何执行箭头功能？非常感谢您的帮助，同时，我将继续浏览并尝试尽可能地了解箭头功能，直到我仍然还不熟悉它为止。

Answer 1

您发布的示例使用npm包antd，这是一个React UI库。它使用FormList（由antd提供）来提供您要实现的功能。您可以检出此处https://github.com/ant-design/ant-design/blob/master/components/form/FormList.tsx使用的组件的代码。

传递到FormList的箭头函数称为“渲染道具”，它通过FormList -prop传递到children并从那里执行，这就是为什么实际上没有调用它的原因示例代码。您可以在https://reactjs.org/docs/render-props.html上阅读有关概念，一开始很难理解，但过一会儿才有意义。

Answer 2

所以.map()是您可以在返回新数组的数组上调用的方法。您将一个函数传递给.map()方法，然后可以命名一些输入参数，以供您在map函数内部使用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

当函数运行时，地图函数会填补空白。我的意思是，fields和index可以取您想要的任何名称。您可以将它们称为f和i，然后您将在人民代码中看到这些示例。

基本上，函数在执行时从映射中向下传递时会在内部使用这些名称，该函数针对数组中的每个项目运行。

因此，在一个基本示例中，您遍历该数组，并且每次循环该函数时，都会传递当前数组项和索引计数。这是一个数组的简单示例，该数组的.map()返回一个新的对象数组。

const result = [1, 2, 3].map((number, i) => {
  return {
    number: number,
    index: i,
  }
});

document.write(JSON.stringify(result));