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

71 lines
2.1 KiB
Markdown
Raw Normal View History

2016-03-02 17:11:12 +08:00
# 典型表单
2015-06-15 20:24:01 +08:00
2015-10-29 08:41:51 +08:00
- order: 2
2015-06-15 20:24:01 +08:00
2016-01-30 19:00:56 +08:00
示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
2015-07-17 15:12:48 +08:00
2015-06-15 20:24:01 +08:00
---
````jsx
2016-04-06 19:30:23 +08:00
import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon } from 'antd';
2015-10-29 08:41:51 +08:00
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
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
},
2015-10-09 15:44:10 +08:00
2015-10-25 11:35:03 +08:00
render() {
2016-01-30 19:00:56 +08:00
const { getFieldProps } = this.props.form;
2016-03-02 17:31:27 +08:00
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
2015-10-25 11:35:03 +08:00
return (
<Form horizontal onSubmit={this.handleSubmit}>
2015-10-29 08:41:51 +08:00
<FormItem
2016-03-02 17:31:27 +08:00
{...formItemLayout}
label="用户名:">
2015-10-29 08:41:51 +08:00
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
</FormItem>
<FormItem
2016-03-02 17:31:27 +08:00
{...formItemLayout}
label="密码:">
2016-01-30 19:00:56 +08:00
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
2015-10-29 08:41:51 +08:00
</FormItem>
<FormItem
2016-03-02 17:31:27 +08:00
{...formItemLayout}
label="您的性别:">
2016-03-02 17:11:12 +08:00
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>
2015-10-29 08:41:51 +08:00
</FormItem>
<FormItem
2016-03-02 17:31:27 +08:00
{...formItemLayout}
2015-10-25 11:35:03 +08:00
label="备注:"
2015-11-25 17:47:55 +08:00
help="随便写点什么">
2016-01-30 19:00:56 +08:00
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
2015-10-29 08:41:51 +08:00
</FormItem>
<FormItem
2016-03-02 17:31:27 +08:00
{...formItemLayout}
2016-03-02 17:41:29 +08:00
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip> </span>}>
2015-10-25 11:35:03 +08:00
<label>
2016-01-30 19:00:56 +08:00
<Checkbox {...getFieldProps('agreement')} />同意
2015-10-25 11:35:03 +08:00
</label>
2015-10-29 08:41:51 +08:00
</FormItem>
2016-04-06 19:30:23 +08:00
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
<Button type="primary" htmlType="submit">确定</Button>
</FormItem>
2015-10-25 11:35:03 +08:00
</Form>
);
}
});
2015-10-29 08:41:51 +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
````