2015-07-07 11:25:16 +08:00
|
|
|
|
# 表单组合
|
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
- order: 5
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2015-07-07 23:45:46 +08:00
|
|
|
|
集中营,展示和表单相关的其他 ant-design 组件。
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
````jsx
|
2016-01-27 12:00:27 +08:00
|
|
|
|
import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
|
2016-01-30 19:00:56 +08:00
|
|
|
|
Slider, Button, Row, Col, Upload, Icon } from 'antd';
|
2015-10-29 08:41:51 +08:00
|
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
const Option = Select.Option;
|
2016-01-22 20:58:45 +08:00
|
|
|
|
const RadioButton = Radio.Button;
|
|
|
|
|
const RadioGroup = Radio.Group;
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2016-01-30 19:00:56 +08:00
|
|
|
|
let Demo = React.createClass({
|
|
|
|
|
handleSubmit(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
console.log('收到表单值:', this.props.form.getFieldsValue());
|
2015-10-25 11:35:03 +08:00
|
|
|
|
},
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2016-01-30 19:00:56 +08:00
|
|
|
|
normFile(e) {
|
|
|
|
|
if (Array.isArray(e)) {
|
|
|
|
|
return e;
|
2015-12-31 09:51:44 +08:00
|
|
|
|
}
|
2016-01-30 19:00:56 +08:00
|
|
|
|
return e && e.fileList;
|
2015-10-25 11:35:03 +08:00
|
|
|
|
},
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
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 horizontal onSubmit={this.handleSubmit} >
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="InputNumber 数字输入框:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
2016-01-30 19:00:56 +08:00
|
|
|
|
wrapperCol={{ span: 10 }}>
|
|
|
|
|
<InputNumber min={1} max={10} style={{ width: 100 }}
|
|
|
|
|
{...getFieldProps('inputNumber', { initialValue: 3 })} />
|
2015-10-25 11:35:03 +08:00
|
|
|
|
<span className="ant-form-text"> 台机器</span>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="我是标题:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
2016-01-30 19:00:56 +08:00
|
|
|
|
wrapperCol={{ span: 10 }}>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
<p className="ant-form-text">
|
2015-11-25 17:35:49 +08:00
|
|
|
|
<a href="#">链接文字</a>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
</p>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="Switch 开关:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
|
wrapperCol={{ span: 10 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
|
required>
|
2016-01-30 19:00:56 +08:00
|
|
|
|
<Switch {...getFieldProps('switch')} />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="Slider 滑动输入条:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
|
wrapperCol={{ span: 10 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
|
required>
|
2016-02-22 10:52:30 +08:00
|
|
|
|
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-10-25 11:35:03 +08:00
|
|
|
|
label="Select 选择器:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
|
wrapperCol={{ span: 16 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
|
required>
|
2016-01-30 19:00:56 +08:00
|
|
|
|
<Select style={{ width: 200 }}
|
|
|
|
|
{...getFieldProps('select')}>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
<Option value="jack">jack</Option>
|
|
|
|
|
<Option value="lucy">lucy</Option>
|
|
|
|
|
<Option value="disabled" disabled>disabled</Option>
|
|
|
|
|
<Option value="yiminghe">yiminghe</Option>
|
|
|
|
|
</Select>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
2015-12-10 16:12:10 +08:00
|
|
|
|
label="DatePicker 日期选择框:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
|
required>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<Col span="6">
|
2016-02-22 10:52:30 +08:00
|
|
|
|
<DatePicker {...getFieldProps('startDate')} />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</Col>
|
|
|
|
|
<Col span="1">
|
2015-10-25 11:35:03 +08:00
|
|
|
|
<p className="ant-form-split">-</p>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</Col>
|
|
|
|
|
<Col span="6">
|
2016-01-30 19:00:56 +08:00
|
|
|
|
<DatePicker {...getFieldProps('endDate')} />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</Col>
|
|
|
|
|
</FormItem>
|
2016-01-27 12:00:27 +08:00
|
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
|
label="TimePicker 时间选择器:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
|
wrapperCol={{ span: 16 }}
|
2016-01-27 12:00:27 +08:00
|
|
|
|
required>
|
2016-02-22 10:52:30 +08:00
|
|
|
|
<TimePicker {...getFieldProps('time')} />
|
2016-01-27 12:00:27 +08:00
|
|
|
|
</FormItem>
|
2016-01-22 20:58:45 +08:00
|
|
|
|
|
|
|
|
|
<FormItem
|
|
|
|
|
label="选项:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}>
|
2016-01-30 19:00:56 +08:00
|
|
|
|
<RadioGroup {...getFieldProps('rg')}>
|
2016-01-22 20:58:45 +08:00
|
|
|
|
<RadioButton value="a">选项一</RadioButton>
|
|
|
|
|
<RadioButton value="b">选项二</RadioButton>
|
|
|
|
|
<RadioButton value="c">选项三</RadioButton>
|
|
|
|
|
</RadioGroup>
|
|
|
|
|
</FormItem>
|
|
|
|
|
|
2015-12-31 09:51:44 +08:00
|
|
|
|
<FormItem
|
|
|
|
|
label="logo图:"
|
2016-01-27 16:44:50 +08:00
|
|
|
|
labelCol={{ span: 8 }}
|
|
|
|
|
wrapperCol={{ span: 16 }}
|
2016-01-22 20:58:45 +08:00
|
|
|
|
help="提示信息要长长长长长长长长长长长长长长">
|
2016-01-30 19:00:56 +08:00
|
|
|
|
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
|
|
|
|
|
{...getFieldProps('upload', {
|
|
|
|
|
valuePropName: 'fileList',
|
|
|
|
|
normalize: this.normFile
|
|
|
|
|
})}
|
|
|
|
|
>
|
2015-12-31 09:51:44 +08:00
|
|
|
|
<Button type="ghost">
|
|
|
|
|
<Icon type="upload" /> 点击上传
|
|
|
|
|
</Button>
|
|
|
|
|
</Upload>
|
|
|
|
|
</FormItem>
|
2016-01-27 16:44:50 +08:00
|
|
|
|
<Row style={{ marginTop: 24 }}>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<Col span="16" offset="8">
|
2015-10-25 11:35:03 +08:00
|
|
|
|
<Button type="primary" htmlType="submit">确定</Button>
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
</Form>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
});
|
2015-10-09 15:44:10 +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-07-16 13:00:56 +08:00
|
|
|
|
````
|