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
|
|
|
行内排列,常用于登录界面。
|
|
|
|
|
2015-07-20 20:35:48 +08:00
|
|
|
````jsx
|
2016-01-23 15:22:16 +08:00
|
|
|
import { Form, Input, Button, Checkbox } from 'antd';
|
2015-10-29 08:41:51 +08:00
|
|
|
const FormItem = Form.Item;
|
2015-07-20 20:35:48 +08:00
|
|
|
|
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
|
2016-06-02 18:09:20 +08:00
|
|
|
label="账户">
|
2016-01-30 19:00:56 +08:00
|
|
|
<Input placeholder="请输入账户名"
|
|
|
|
{...getFieldProps('userName')} />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
|
|
|
<FormItem
|
2016-06-02 18:09:20 +08:00
|
|
|
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);
|
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
2015-06-15 20:24:01 +08:00
|
|
|
````
|