` import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Form, Input, Space, Select } from "antd";
const App = () => {
const onFinish = (values) => {
console.log("Received values of form:", values);
};
const [form] = Form.useForm();
return (
name="dynamic_form_nest_item"
onFinish={onFinish}
autoComplete="off"
form={form}
<Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space
key={key}
style={{
display: "flex",
marginBottom: 8
}}
align="baseline"
<Form.Item
{...restField}
name={[name, "first"]}
rules={[
{
required: true,
message: "Missing first name"
}
]}
</Form.Item>
<Form.Item
{...restField}
name={[name, "last"]}
rules={[
{
required: true,
message: "Missing last name"
}
]}
<Select
placeholder="Last Name"
style={{ width: 200 }}
options={[
{ value: 1, label: 1 },
{ value: 2, label: 2 }
]}
onSelect={(value) => {
// 判断只能单选的选项
if (value === "3") {
const users = form.getFieldValue("users");
const userList = JSON.parse(JSON.stringify(users));
if (userList[name]) {
userList[name].last = [value];
}
form.setFieldsValue({
users: userList
});
}
}}
mode="tags"
/>
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
block
icon={}
Add field
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
Submit
</Form.Item>
);
};
export default App;
`
