<Form
form={form}
name="dynamic_form_complex"
onFinish={onFinish}
style={{ maxWidth: 600 }}
autoComplete="off"
>
<Form.Item
name="area"
label="Area"
rules={[{ required: true, message: "Missing area" }]}
>
<Select options={areas} onChange={handleChange} />
</Form.Item>
<Form.List name="sights">
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
<Space key={field.key} align="baseline">
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.area !== curValues.area ||
prevValues.sights !== curValues.sights
}
>
{() => (
<Form.Item
{...field}
label="Sight"
name={[field.name, "sight"]}
rules={[{ required: true, message: "Missing sight" }]}
>
<Select
disabled={!form.getFieldValue("area")}
style={{ width: 130 }}
>
{(
sights[form.getFieldValue("area") as SightsKeys] || []
).map((item) => (
<Option key={item} value={item}>
{item}
</Option>
))}
</Select>
</Form.Item>
)}
</Form.Item>
<Form.Item
{...field}
label="Price"
name={[field.name, "price"]}
rules={[{ required: true, message: "Missing price" }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined
onClick={() => {
// sights为Form.List的name
// 第一种用法
remove(field.name)
add(undefined, field.name)
// 第二种用法
form.setFieldValue(
["sights", field.name, "sight"],
undefined
)
form.setFieldValue(
["sights", field.name, "price"],
undefined
)
// 第三种用法
const arr = form.getFieldValue("sights")
if (arr) {
arr[field.name] = {}
form.setFieldValue("sights", arr)
}
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
block
icon={<PlusOutlined />}
>
Add sights
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
