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

Question

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

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

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

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

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

等等。

我偶然发现了这个如何做的例子(https://codesandbox.io/s/wonderful-lichterman-br63z?file=/index.js)，但我似乎无法理解代码的某些部分。我是Javascript的新手，我正在使用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的箭头函数被称为"render prop"，它通过children-prop传递给FormList并从那里执行，这就是为什么它在示例代码中实际上没有被调用的原因。你可以在这里阅读这个概念https://reactjs.org/docs/render-props.html，一开始有点难，但过一段时间就会有意义。

Answer 2

所以.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));