You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.3 KiB
73 lines
2.3 KiB
import React from 'react';
|
|
import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
const App: React.FC = () => {
|
|
const onFinish = (values: any) => {
|
|
console.log('Received values of form: ', values);
|
|
};
|
|
|
|
return (
|
|
<Form name="complex-form" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
|
<Form.Item label="Username">
|
|
<Space>
|
|
<Form.Item
|
|
name="username"
|
|
noStyle
|
|
rules={[{ required: true, message: 'Username is required' }]}
|
|
>
|
|
<Input style={{ width: 160 }} placeholder="Please input" />
|
|
</Form.Item>
|
|
<Tooltip title="Useful information">
|
|
<Typography.Link href="#API">Need Help?</Typography.Link>
|
|
</Tooltip>
|
|
</Space>
|
|
</Form.Item>
|
|
<Form.Item label="Address">
|
|
<Input.Group compact>
|
|
<Form.Item
|
|
name={['address', 'province']}
|
|
noStyle
|
|
rules={[{ required: true, message: 'Province is required' }]}
|
|
>
|
|
<Select placeholder="Select province">
|
|
<Option value="Zhejiang">Zhejiang</Option>
|
|
<Option value="Jiangsu">Jiangsu</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name={['address', 'street']}
|
|
noStyle
|
|
rules={[{ required: true, message: 'Street is required' }]}
|
|
>
|
|
<Input style={{ width: '50%' }} placeholder="Input street" />
|
|
</Form.Item>
|
|
</Input.Group>
|
|
</Form.Item>
|
|
<Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
|
|
<Form.Item
|
|
name="year"
|
|
rules={[{ required: true }]}
|
|
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
|
|
>
|
|
<Input placeholder="Input birth year" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="month"
|
|
rules={[{ required: true }]}
|
|
style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
|
|
>
|
|
<Input placeholder="Input birth month" />
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item label=" " colon={false}>
|
|
<Button type="primary" htmlType="submit">
|
|
Submit
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|