mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
67 lines
1.4 KiB
Markdown
67 lines
1.4 KiB
Markdown
|
---
|
||
|
order: 0
|
||
|
title:
|
||
|
zh-CN: 基本使用
|
||
|
en-US: Basic Usage
|
||
|
---
|
||
|
|
||
|
## zh-CN
|
||
|
|
||
|
基本的表单数据域控制展示,包含布局、初始化、验证、提交。
|
||
|
|
||
|
## en-US
|
||
|
|
||
|
Basic Form data control. Includes layout, initial values, validation and submit.
|
||
|
|
||
|
```tsx
|
||
|
import { Form, Input, Button, Checkbox } from 'antd';
|
||
|
|
||
|
const layout = {
|
||
|
labelCol: { span: 8 },
|
||
|
wrapperCol: { span: 16 },
|
||
|
};
|
||
|
const tailLayout = {
|
||
|
wrapperCol: { offset: 8, span: 16 },
|
||
|
};
|
||
|
|
||
|
const Demo = () => {
|
||
|
const onFinish = values => {
|
||
|
console.log('Success:', values);
|
||
|
};
|
||
|
|
||
|
const onFinishFailed = errorInfo => {
|
||
|
console.log('Failed:', errorInfo);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Form
|
||
|
{...layout}
|
||
|
name="basic"
|
||
|
initialValues={{ remember: true }}
|
||
|
onFinish={onFinish}
|
||
|
onFinishFailed={onFinishFailed}
|
||
|
>
|
||
|
<Form.Item label="Username" name="username" rules={[{ required: true }]}>
|
||
|
<Input />
|
||
|
</Form.Item>
|
||
|
|
||
|
<Form.Item label="Password" name="password" rules={[{ required: true }]}>
|
||
|
<Input.Password />
|
||
|
</Form.Item>
|
||
|
|
||
|
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
|
||
|
<Checkbox>Remember me</Checkbox>
|
||
|
</Form.Item>
|
||
|
|
||
|
<Form.Item {...tailLayout}>
|
||
|
<Button type="primary" htmlType="submit">
|
||
|
Submit
|
||
|
</Button>
|
||
|
</Form.Item>
|
||
|
</Form>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
ReactDOM.render(<Demo />, mountNode);
|
||
|
```
|