[英]How to iteratively add Form.Item in Form.Item in ant design Form
const [selectedCompanyId, setSelectedCompanyId] = useState(undefined);
const [selectedProducts, setSelectedProducts] = useState([]);
const { Option } = Select;
const [form] = Form.useForm();
const handleFormValuesChange = changedValues => {
const formFieldName = Object.keys(changedValues)[0];
if (formFieldName === "companyId") {
setSelectedCompanyId(changedValues[formFieldName]);
setSelectedProducts([]);
form.setFieldsValue({ products: undefined }); //reset product selection
}
if (formFieldName === "products") {
setSelectedProducts(changedValues[formFieldName]);
}
};
<Form
layout="vertical"
size="medium"
form={form}
className="teste-form"
requiredMark={false}
onFinish={onFinish}
onValuesChange={handleFormValuesChange}
>
<Form.Item
label="Company/Customer"
rules={[
{ required: true, message: "Please select Company!" }
]}
name="companyId"
>
<Select style={{ width: "50%" }} name="companyId">
{users.map((user, index) => {
return (
<Option key={index} value={user.companyID}>
{user.companyName}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item
label="Products"
name="products"
rules={[
{ required: true, message: "Please select Products!" }
]}
>
<Select mode="multiple" allowClear style={{ width: "70%" }}>
{products
.filter(
product => product.companyId === selectedCompanyId
)
.map(product => (
<Option key={product.id} value={product.id}>
{product.productName}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
label="Price Map"
name="priceMap"
rules={[{ required: true, message: "Please input Prices!" }]}
>
{selectedProducts.forEach(productId => {
products.forEach(product => {
if (product.id === productId) {
return (
<Form.Item
label={product.type}
name={product.priceId}
style={{ width: "50%" }}
rules={[
{ required: true, message: "Please input price!" }
]}
initialValue={product.price}
>
{console.log("Inside form.item")}
<Input />
</Form.Item>
);
}
});
})}
</Form.Item>
</Form>
I am trying to achieve dynamically add <Form.Item>
in Price Map element changes according to the Product onChange
selection.我正在尝试根据 Product
onChange
选择在 Price Map 元素更改中动态添加<Form.Item>
。
I have specified <Form.Item label="Products" name="products">
and inside this I am checking condition and adding <Form.Item>
iteratively.我已经指定了
<Form.Item label="Products" name="products">
并在其中检查条件并迭代添加<Form.Item>
。
By checking console.log()
conditions in <Form.Item label="Products" name="products"> </Form.Item>
are getting true but the UI doesn't show the iteratively added <Form.Item>
.通过检查
<Form.Item label="Products" name="products"> </Form.Item>
中的console.log()
条件变得真实,但 UI 没有显示迭代添加的<Form.Item>
。
I am really new to ant design and not able to figure out how to add Form.Item
dynamically.我真的是蚂蚁设计的新手,无法弄清楚如何动态添加
Form.Item
。
Here, users and products are json as below.在这里,用户和产品是 json,如下所示。
users:
[{
companyID: 2
companyName: "TEST1"
},{
companyID: 7
companyName: "TEST2"
}]
products:
[{
companyId: 2,
id: 1,
type:"PEN",
priceId:2,
productName: "TESTProduct1"
},{
companyId: 7,
productName: "TESTProduct2",
type:"PENCIL",
priceId:3,
id: 2
},{
companyId: 7,
id: 3,
type:"ERASER",
priceId:4,
productName: "TESTProduct3"
},{
companyId: 7,
id: 4,
type:"SHARPNER",
priceId:5,
productName: "TESTProduct4"
}]
forEach
is used to procedurably loop through an Array. forEach
用于按程序循环遍历数组。 It is not used to build expressions .它不用于构建表达式。 React element expressions are what you want to return from your render functions.
React 元素表达式是您想要从渲染函数返回的内容。
forEach
returns undefined
. forEach
返回undefined
。
<Form.Item
label="Price Map"
name="priceMap"
rules={[{ required: true, message: "Please input Prices!" }]}
>
{selectedProducts.flatMap(productId => products
.filter(product => product.id === productId)
.map(product => (
<Form.Item
label={product.type}
name={product.priceId}
style={{ width: "50%" }}
rules={[
{ required: true, message: "Please input price!" }
]}
initialValue={product.price}
>
{console.log("Inside form.item")}
<Input />
</Form.Item>
))
)}
</Form.Item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.