![](/img/trans.png)
[英]How do I format AntD form input fields such as phone numbers and SSNs in React?
[英]How to create dynamic form input fields in React with ANTd
Codesandbox链接: https://codesandbox.io/s/compassionate-sanderson-1m8nv?file=/src/App.js
我找不到关于这个主题的太多信息。 以下是我想要实现的目标:
我希望用户能够编辑数据库中已存在的采购订单的一些详细信息,然后使用表单重新提交采购订单。 原始采购订单的详细信息应显示在表单输入字段中,用户可以直接通过这些字段更改它们然后提交。
我不熟悉 web 开发,所以请多多包涵。
我希望最终表格 object 看起来像这样:
{
po_number:"123abc",
carrier:"Fastway",
items: [{
item_code:"dnh75n",
quantity:"10",
special_requirements:"Add picture of happy dog"
},
{
item_code:"456def",
quantity:"4",
special_requirements:"Do not include lids"
}
]
}
生成的表单输入字段的数量将基于采购订单中的项目数量。 我在下面创建了一个简单的 React 组件来演示我正在尝试做什么。 或者只是检查上面的代码沙箱链接。 任何帮助,将不胜感激。 我什至找不到有关如何对 ANTd 表单项目进行分组以在采购订单中创建项目数组的信息。 我在他们的网站上看过很多动态表单示例,但我想根据采购订单中预先存在的项目创建表单,而不是添加带有用户输入的字段。
import { Form, Input, Button } from 'antd';
//This is the order that already exists
const order = {
po_number:"123abc",
carrier:"Fastway",
items: [{
item_code:"dnh75n",
quantity:"10",
special_requirements:"Add picture of happy dog"
},
{
item_code:"456def",
quantity:"4",
special_requirements:"Do not include lids"
}
]
};
const GroupForm = () => {
const onFinish = values => {
console.log(values);
}
//Create form fields based off how many items are in the order
const itemInputs = order.items.map(item => {
return (
<div>
<b>Item{" " + item.item_code}</b>
<Form.Item name={item.item_code + "_quantity"} label="quantity">
<Input defaultValue={item.quantity} style={{width: "500px"}} />
</Form.Item>
<Form.Item name={item.item_code + "_requirements"} label="speacial requirements">
<Input defaultValue={item.special_requirements} style={{width: "500px"}} />
</Form.Item>
</div>
);
});
return(
<div>
<Form onFinish={onFinish}>
<b>{"Order " + order.po_number}</b>
<Form.Item name="carrier" label="carrier">
<Input defaultValue={order.carrier} style={{width: "500px"}} />
</Form.Item>
<b>Order Items</b>
{itemInputs}
<Form.Item>
<Button type="primary" htmlType="submit"> Change Details </Button>
</Form.Item>
</Form>
</div>
);
}
export default GroupForm;
如果您使用的是 antd 4.9.0+ 版本,则可以利用 [ Form.List
(https://ant.design/components/form/#Form.List) 上的initialValue
属性。 这允许您在数组的表单项上设置初始值。 或者,您可以在Form
上设置initialValues
属性。 这是使用前一种方法的最小可行示例。
import { Form, Input, Button, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import React from "react";
//Basic Idea
/*
I want the user to be able to edit some details of a purchase order that already exists in the database,
then resubmit the order with a form.
The details of the purchase order should be orginally displayed in the form input fields,
and the user can change them directly via those fields.
*/
//This is the order that already exists
const order = {
po_number: "123abc",
carrier: "Fastway",
items: [
{
item_code: "dnh75n",
quantity: "10",
special_requirements: "Add picture of happy dog"
},
{
item_code: "456def",
quantity: "4",
special_requirements: "Do not include lids"
}
]
};
const GroupForm = () => {
const onFinish = (values) => {
console.log(values);
};
//Create form fields based off how many items are in the order
const itemInputs = order.items.map((item) => {
return {
item_code: item.item_code,
quantity: item.quantity,
special_requirements: item.special_requirements
};
});
return (
<div>
<Form onFinish={onFinish}>
<b>{"Order " + order.po_number}</b>
<Form.Item name="carrier" label="carrier" initialValue={order.carrier}>
<Input style={{ width: "500px" }} />
</Form.Item>
<Form.Item
name="po_number"
label="PO number"
initialValue={order.po_number}
hidden
>
<Input />
</Form.Item>
<b>Order Items</b>
<Form.List name="items" initialValue={itemInputs}>
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="baseline"
>
<Form.Item
{...field}
name={[field.name, "item_code"]}
fieldKey={[field.fieldKey, "item_code"]}
>
<Input placeholder="Item Code" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, "quantity"]}
fieldKey={[field.fieldKey, "quantity"]}
>
<Input placeholder="Quantity" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, "special_requirements"]}
fieldKey={[field.fieldKey, "special_requirements"]}
>
<Input placeholder="Quantity" />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
block
icon={<PlusOutlined />}
>
Add item
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
{" "}
Change Details{" "}
</Button>
</Form.Item>
</Form>
</div>
);
};
export default GroupForm;
//I want to submit a form object that looks like this. E.g. This is what 'onFinish' should display in the console
/*
{
po_number:"123abc",
carrier:"Fastway",
items: [{
item_code:"dnh75n",
quantity:"10",
special_requirements:"Add picture of happy dog"
},
{
item_code:"456def",
quantity:"4",
special_requirements:"Do not include lids"
}
]
}
*/
感谢 Scratch'N'Purr,我使用您的解决方案进一步将字段放入 antd 表中。
首先是一个简短的说明:以前解决方案中的fieldKey={[field.fieldKey, "quantity"]}
对我不起作用,但将其更改为key={[field.key, "quantity"]}
就可以了。
//define the columns for the table
const columns = [
{
title: "ITEM#",
dataIndex: "item_code",
key: "item_code",
width: "12%",
//use the field here to get all infos for the form
render: (_, field) => (
<Form.Item
{...field}
name={[field.name, "item_code"]}
key={[field.key, "item_code"]}
noStyle
>
<Input placeholder="ITEM#" />
</Form.Item>
),
},
{
title: "Quantity",
dataIndex: "quantity",
key: "quantity",
render: (_, field) => (
<Form.Item
{...field}
name={[field.name, "quantity"]}
//@ts-ignore
key={[field.key, "quantity"]}
noStyle
>
<Input placeholder="Quantity" />
</Form.Item>
),
}];
const GroupForm = () => {
const onFinish = (values) => {
console.log(values);
};
//Create form fields based off how many items are in the order
const itemInputs = order.items.map((item) => {
return {
item_code: item.item_code,
quantity: item.quantity,
special_requirements: item.special_requirements,
};
});
return (
<div>
<Form onFinish={onFinish}>
<b>{"Order " + order.po_number}</b>
<Form.Item name="carrier" label="carrier" initialValue={order.carrier}>
<Input style={{ width: "500px" }} />
</Form.Item>
<Form.Item
name="po_number"
label="PO number"
initialValue={order.po_number}
hidden
>
<Input />
</Form.Item>
<b>Order Items</b>
<Form.List name="items" initialValue={itemInputs}>
{(fields, { add, remove }, { errors }) => (
<>
{/* This is where to put the table. As a data source i used the fields */}
<Table dataSource={fields} columns={columns} pagination={false} />
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{ width: "60%" }}
icon={<PlusOutlined />}
>
Add field
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
{" "}
Change Details{" "}
</Button>
</Form.Item>
</Form>
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.