ant-design/components/drawer/demo/from-drawer.md

190 lines
5.7 KiB
Markdown

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