Question

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

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

（以下是我需要动态添加和删除实例的部分，因为可能有1家公司的多个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

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

基本上，您的函数然后在内部使用这些名称，因为它们在执行函数时从map向下传递，该函数针对数组中的每个项目运行。

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

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

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

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

2 个答案: