You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
5.5 KiB

7 years ago
---
order: 3
7 years ago
title:
7 years ago
zh-CN: 对象编辑
en-US: Edit item in drawer
7 years ago
---
## zh-CN
7 years ago
用于承载编辑相关操作,需要点击关闭按钮关闭。
7 years ago
## en-US
A drawer containing an editable form which needs to be collapsed by clicking the close button.
7 years ago
```jsx
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
const { Option } = Select;
class DrawerForm extends React.Component {
7 years ago
state = { visible: false };
6 years ago
7 years ago
showDrawer = () => {
this.setState({
visible: true,
7 years ago
});
};
6 years ago
7 years ago
onClose = () => {
this.setState(
{
visible: false,
}
);
7 years ago
};
6 years ago
7 years ago
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
Create
</Button>
<Drawer
title="Create"
width={720}
placement="right"
onClose={this.onClose}
7 years ago
maskClosable={false}
7 years ago
visible={this.state.visible}
style={{
height: 'calc(100% - 55px)',
overflow: 'auto',
paddingBottom: 53,
}}
7 years ago
>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Name">
7 years ago
{getFieldDecorator('name', {
rules: [{ required: true, message: 'please enter user name' }],
})(<Input placeholder="please enter user name" />)}
7 years ago
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Url">
7 years ago
{getFieldDecorator('url', {
rules: [{ required: true, message: 'please enter url' }],
7 years ago
})(
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="please enter url"
7 years ago
/>
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Owner">
7 years ago
{getFieldDecorator('owner', {
rules: [{ required: true, message: 'Please select an owner' }],
7 years ago
})(
<Select placeholder="Please select an owner">
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
7 years ago
</Select>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Type">
7 years ago
{getFieldDecorator('type', {
rules: [{ required: true, message: 'Please choose the type' }],
7 years ago
})(
<Select placeholder="Please choose the type">
<Option value="private">Private</Option>
<Option value="public">Public</Option>
7 years ago
</Select>
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Approver">
7 years ago
{getFieldDecorator('approver', {
rules: [{ required: true, message: 'Please choose the approver' }],
7 years ago
})(
<Select placeholder="Please choose the approver">
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
7 years ago
</Select>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="DateTime">
7 years ago
{getFieldDecorator('dateTime', {
rules: [{ required: true, message: 'Please choose the dateTime' }],
7 years ago
})(
<DatePicker.RangePicker
style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentNode}
/>
)}
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
7 years ago
<Form.Item label="Description">
{getFieldDecorator('description', {
7 years ago
rules: [
{
required: true,
message: 'please enter url description',
},
],
})(<Input.TextArea rows={4} placeholder="please enter url description" />)}
7 years ago
</Form.Item>
</Col>
</Row>
</Form>
7 years ago
<div
style={{
position: 'absolute',
bottom: 0,
width: '100%',
borderTop: '1px solid #e8e8e8',
padding: '10px 16px',
textAlign: 'right',
left: 0,
background: '#fff',
7 years ago
borderRadius: '0 0 4px 4px',
}}
>
<Button
style={{
marginRight: 8,
}}
onClick={this.onClose}
7 years ago
>
Cancel
7 years ago
</Button>
<Button onClick={this.onClose} type="primary">Submit</Button>
7 years ago
</div>
7 years ago
</Drawer>
</div>
);
}
}
const App = Form.create()(DrawerForm);
7 years ago
ReactDOM.render(<App />, mountNode);
7 years ago
```
<style>
#_hj_feedback_container{
display:none
}
</style>