2015-11-02 16:37:40 +08:00
|
|
|
|
# 平行排列
|
2015-06-15 20:24:01 +08:00
|
|
|
|
|
2015-07-07 23:45:46 +08:00
|
|
|
|
- order: 1
|
2015-06-15 20:24:01 +08:00
|
|
|
|
|
2015-11-02 16:37:40 +08:00
|
|
|
|
行内排列,常用于登录界面。
|
|
|
|
|
|
2015-06-15 20:24:01 +08:00
|
|
|
|
---
|
|
|
|
|
|
2015-07-20 20:35:48 +08:00
|
|
|
|
````jsx
|
2015-10-29 08:53:54 +08:00
|
|
|
|
import {Form, Input, Button, Checkbox, message} from 'antd';
|
2015-10-29 08:41:51 +08:00
|
|
|
|
const FormItem = Form.Item;
|
2015-07-20 20:35:48 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
const Demo = React.createClass({
|
2015-10-25 11:35:03 +08:00
|
|
|
|
mixins: [Form.ValueMixin],
|
|
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
|
return {
|
|
|
|
|
formData: {
|
|
|
|
|
userName: undefined,
|
|
|
|
|
password: undefined,
|
|
|
|
|
agreement: undefined,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleSubmit(e) {
|
|
|
|
|
e.preventDefault();
|
2015-11-25 17:35:49 +08:00
|
|
|
|
message.success('收到表单值~~~ :' + JSON.stringify(this.state.formData, function(k, v) {
|
2015-10-27 19:23:45 +08:00
|
|
|
|
if (typeof v === 'undefined') {
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
return v;
|
2015-10-29 08:41:51 +08:00
|
|
|
|
}));
|
2015-10-25 11:35:03 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render() {
|
2015-10-29 08:41:51 +08:00
|
|
|
|
const formData = this.state.formData;
|
2015-10-25 11:35:03 +08:00
|
|
|
|
return (
|
|
|
|
|
<Form inline onSubmit={this.handleSubmit}>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-10-27 19:23:45 +08:00
|
|
|
|
id="userName"
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="账户:">
|
2015-11-04 17:10:19 +08:00
|
|
|
|
<Input placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} value={formData.userName} />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem
|
2015-10-27 19:23:45 +08:00
|
|
|
|
id="password"
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="密码:">
|
2015-11-04 17:10:19 +08:00
|
|
|
|
<Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} value={formData.password} />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
|
|
|
|
<FormItem>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
<label className="ant-checkbox-inline">
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
|
2015-10-25 11:35:03 +08:00
|
|
|
|
</label>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
|
|
|
|
<Button type="primary" htmlType="submit">登录</Button>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
</Form>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
ReactDOM.render(<Demo />, document.getElementById('components-form-demo-inline-form'));
|
2015-06-15 20:24:01 +08:00
|
|
|
|
````
|