ant-design/components/form/demo/inline-form.md

45 lines
1.0 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 1
title: 平行排列
---
2015-06-15 20:24:01 +08:00
2015-11-02 16:37:40 +08:00
行内排列,常用于登录界面。
````jsx
import { Form, Input, Button, Checkbox } from 'antd';
2015-10-29 08:41:51 +08:00
const FormItem = Form.Item;
2016-01-30 19:00:56 +08:00
let Demo = React.createClass({
2015-10-25 11:35:03 +08:00
handleSubmit(e) {
e.preventDefault();
2016-01-30 19:00:56 +08:00
console.log('收到表单值:', this.props.form.getFieldsValue());
2015-10-25 11:35:03 +08:00
},
render() {
2016-01-30 19:00:56 +08:00
const { getFieldProps } = this.props.form;
2015-10-25 11:35:03 +08:00
return (
<Form inline onSubmit={this.handleSubmit}>
2015-10-29 08:41:51 +08:00
<FormItem
label="账户">
2016-01-30 19:00:56 +08:00
<Input placeholder="请输入账户名"
{...getFieldProps('userName')} />
2015-10-29 08:41:51 +08:00
</FormItem>
<FormItem
label="密码">
2016-01-30 19:00:56 +08:00
<Input type="password" placeholder="请输入密码"
{...getFieldProps('password')} />
2015-10-29 08:41:51 +08:00
</FormItem>
<FormItem>
2016-04-15 23:34:40 +08:00
<Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
2015-10-29 08:41:51 +08:00
</FormItem>
<Button type="primary" htmlType="submit">登录</Button>
2015-10-25 11:35:03 +08:00
</Form>
);
2016-05-11 09:32:33 +08:00
},
2015-10-25 11:35:03 +08:00
});
2016-01-30 19:00:56 +08:00
Demo = Form.create()(Demo);
ReactDOM.render(<Demo />, mountNode);
2015-06-15 20:24:01 +08:00
````