mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
|
import React from 'react';
|
||
|
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||
|
import { Button, Form, Input, Select, Space } from 'antd';
|
||
|
|
||
|
const { Option } = Select;
|
||
|
|
||
|
const areas = [
|
||
|
{ label: 'Beijing', value: 'Beijing' },
|
||
|
{ label: 'Shanghai', value: 'Shanghai' },
|
||
|
];
|
||
|
|
||
|
const sights = {
|
||
|
Beijing: ['Tiananmen', 'Great Wall'],
|
||
|
Shanghai: ['Oriental Pearl', 'The Bund'],
|
||
|
};
|
||
|
|
||
|
type SightsKeys = keyof typeof sights;
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [form] = Form.useForm();
|
||
|
|
||
|
const onFinish = (values: any) => {
|
||
|
console.log('Received values of form:', values);
|
||
|
};
|
||
|
|
||
|
const handleChange = () => {
|
||
|
form.setFieldsValue({ sights: [] });
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Form form={form} name="dynamic_form_complex" onFinish={onFinish} 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={() => remove(field.name)} />
|
||
|
</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>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|