代码沙盒链接: https://codesandbox.io/s/compassionate-sanderson-1m8nv?file=/src/App.js
我无法找到有关此主题的太多信息。以下是我想要实现的:
我希望用户能够编辑数据库中已存在的采购订单的一些详细信息,然后使用表单重新提交采购订单。原始采购订单的详细信息应显示在表单输入字段中,用户可以通过这些字段直接更改并提交。
我不精通网络开发,所以请耐心等待。
我希望最终的表单对象看起来像这样:
{
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;
答案 0 :(得分:1)
如果您使用的是 antd 4.9.0+ 版本,则可以利用 [ textSize.addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}
override fun afterTextChanged(s: Editable) {
if (textSize.text!!.isNotEmpty()) {
var yourText: String? = textSize.text.toString()
// or convert to Integer with .toInt()
try {
val yourInt = textSize.text.toInt()
// ... do your stuff
} catch (nfe: NumberFormatException) {
// not a valid int
}
}
}
})
(https://ant.design/components/form/#Form 。列表)。这允许您在数组的表单项上设置初始值。或者,您可以在 Form
上设置 initialValue
属性。这是使用前一种方法的最小可行示例。
Form.List