## 創建修改頁
1. 修改頁元素與新增差不多，不同的是修改頁面需要在組件加載的時候獲取數據，從而綁定在頁面上
2. 將上一節的新增頁代碼過來稍作修改
~~~
import React, { PureComponent } from 'react';
import router from 'umi/router';
import { Form, Input, Card, Button, message, DatePicker } from 'antd';
import moment from 'moment';
import Panel from '../../../components/Panel';
import styles from '../../../layouts/Sword.less';
import { submit } from '../../../services/demo';
import func from '../../../utils/Func';
const FormItem = Form.Item;
const { TextArea } = Input;
@Form.create()
class DemoEdit extends PureComponent {
handleSubmit = e => {
e.preventDefault();
const { form } = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const params = {
...values,
date: func.format(values.date),
};
submit(params).then(resp => {
if (resp.success) {
message.success('提交成功');
router.push('/platform/demo');
} else {
message.warn(resp.msg);
}
});
}
});
};
render() {
const {
form: { getFieldDecorator },
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const action = (
<Button type="primary" onClick={this.handleSubmit}>
提交
</Button>
);
return (
<Panel title="修改" back="/platform/demo" action={action}>
<Form hideRequiredMark style={{ marginTop: 8 }}>
<Card title="基本信息" className={styles.card} bordered={false}>
<FormItem {...formItemLayout} label="標題">
{getFieldDecorator('title', {
rules: [
{
required: true,
message: '請輸入標題',
},
],
})(<Input placeholder="請輸入標題" />)}
</FormItem>
<FormItem {...formItemLayout} label="日期">
{getFieldDecorator('date', {
rules: [
{
required: true,
message: '請輸入日期',
},
],
})(
<DatePicker
style={{ width: '100%' }}
format="YYYY-MM-DD HH:mm:ss"
disabledDate={this.disabledDate}
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
/>
)}
</FormItem>
<FormItem {...formItemLayout} label="內容">
{getFieldDecorator('content')(
<TextArea style={{ minHeight: 32 }} placeholder="請輸入內容" rows={10} />
)}
</FormItem>
</Card>
</Form>
</Panel>
);
}
}
export default DemoEdit;
~~~
3. 到路由配置文件`router.config.js`增加路徑
## 對接接口
1. 修改detail方法返回，模擬真實場景
~~~
function getFakeDetail(req, res) {
const json = { code: 200, success: true, msg: '操作成功' };
if (req.query.id === '1') {
json.data = {
id: '1',
title: '測試標題1',
content: '測試內容1',
date: '2018-05-08 12:00:00',
};
} else if (req.query.id === '2') {
json.data = {
id: '2',
title: '測試標題2',
content: '測試內容2',
date: '2018-06-08 12:00:00',
};
} else {
json.data = {
id: '3',
title: '測試標題3',
content: '測試內容3',
date: '2018-07-08 12:00:00',
};
}
return res.json(json);
}
~~~
2. 增加接口對接，因為涉及到UI數據綁定，所以需要用到state
~~~
state = {
data: {},
};
componentWillMount() {
const {
match: {
params: { id },
},
} = this.props;
detail({ id }).then(resp => {
if (resp.success) {
this.setState({ data: resp.data });
}
});
}
~~~
3. 頁面跳轉的時候可以通過props中的match獲取url參數，主要獲取方式為
~~~
const {
match: {
params: { id },
},
} = this.props;
~~~
4. 為三個組件增加數據綁定，需要注意的是，日期類型需要做下格式化才能初始化成功 `initialValue: moment(data.date, 'YYYY-MM-DD HH:mm:ss')`
~~~
{getFieldDecorator('title', {
rules: [
{
required: true,
message: '請輸入標題',
},
],
initialValue: data.title,
})(<Input placeholder="請輸入標題" />)}
~~~
~~~
{getFieldDecorator('date', {
rules: [
{
required: true,
message: '請輸入日期',
},
],
initialValue: moment(data.date, 'YYYY-MM-DD HH:mm:ss'),
})(
<DatePicker
style={{ width: '100%' }}
format="YYYY-MM-DD HH:mm:ss"
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
/>
)}
~~~
~~~
{getFieldDecorator('content', {
initialValue: data.content,
})(<TextArea style={{ minHeight: 32 }} placeholder="請輸入內容" rows={10} />)}
~~~
5. 因為修改的時候，需要同時傳遞id，所以提交方法也得做如下修改
~~~
handleSubmit = e => {
e.preventDefault();
const {
form,
match: {
params: { id },
},
} = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const params = {
id,
...values,
date: func.format(values.date),
};
submit(params).then(resp => {
if (resp.success) {
message.success('提交成功');
router.push('/platform/demo');
} else {
message.warn(resp.msg);
}
});
}
});
};
~~~
6. 打開系統，點擊修改查看數據顯示成功
7. 點擊返回再次點擊`測試標題2`的修改，發現數據也同步變化
8. 點擊提交查看控制臺，數據也傳遞正確
## 全部代碼一覽
~~~
import React, { PureComponent } from 'react';
import router from 'umi/router';
import { Form, Input, Card, Button, message, DatePicker } from 'antd';
import moment from 'moment';
import Panel from '../../../components/Panel';
import styles from '../../../layouts/Sword.less';
import { submit, detail } from '../../../services/demo';
import func from '../../../utils/Func';
const FormItem = Form.Item;
const { TextArea } = Input;
@Form.create()
class DemoEdit extends PureComponent {
state = {
data: {},
};
componentWillMount() {
const {
match: {
params: { id },
},
} = this.props;
detail({ id }).then(resp => {
if (resp.success) {
this.setState({ data: resp.data });
}
});
}
handleSubmit = e => {
e.preventDefault();
const {
form,
match: {
params: { id },
},
} = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const params = {
id,
...values,
date: func.format(values.date),
};
submit(params).then(resp => {
if (resp.success) {
message.success('提交成功');
router.push('/platform/demo');
} else {
message.warn(resp.msg);
}
});
}
});
};
render() {
const {
form: { getFieldDecorator },
} = this.props;
const { data } = this.state;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const action = (
<Button type="primary" onClick={this.handleSubmit}>
提交
</Button>
);
return (
<Panel title="修改" back="/platform/demo" action={action}>
<Form hideRequiredMark style={{ marginTop: 8 }}>
<Card title="基本信息" className={styles.card} bordered={false}>
<FormItem {...formItemLayout} label="標題">
{getFieldDecorator('title', {
rules: [
{
required: true,
message: '請輸入標題',
},
],
initialValue: data.title,
})(<Input placeholder="請輸入標題" />)}
</FormItem>
<FormItem {...formItemLayout} label="日期">
{getFieldDecorator('date', {
rules: [
{
required: true,
message: '請輸入日期',
},
],
initialValue: moment(data.date, 'YYYY-MM-DD HH:mm:ss'),
})(
<DatePicker
style={{ width: '100%' }}
format="YYYY-MM-DD HH:mm:ss"
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
/>
)}
</FormItem>
<FormItem {...formItemLayout} label="內容">
{getFieldDecorator('content', {
initialValue: data.content,
})(<TextArea style={{ minHeight: 32 }} placeholder="請輸入內容" rows={10} />)}
</FormItem>
</Card>
</Form>
</Panel>
);
}
}
export default DemoEdit;
~~~