## 新增頁面
1. 我們到Demo文件夾下新建文件DemoAdd.js
~~~
import React, { PureComponent } from 'react';
import { Form, Input, Card, Button, DatePicker } from 'antd';
import moment from 'moment';
import Panel from '../../../components/Panel';
import styles from '../../../layouts/Sword.less';
const FormItem = Form.Item;
const { TextArea } = Input;
@Form.create()
class DemoAdd extends PureComponent {
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">
提交
</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')(<Input placeholder="請輸入標題" />)}
</FormItem>
<FormItem {...formItemLayout} label="時間">
{getFieldDecorator('date')(
<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')(
<TextArea style={{ minHeight: 32 }} placeholder="請輸入內容" rows={10} />
)}
</FormItem>
</Card>
</Form>
</Panel>
);
}
}
export default DemoAdd;
~~~
2. 主要需要注意的是引入了form中的`getFieldDecorator`，用于進行表單操作、數據綁定、數據獲取等功能
3. 當寫入組件的時候，需要被`getFieldDecorator`包裝起來，具體語法如下
~~~
{getFieldDecorator('title')(<Input placeholder="請輸入標題" />)}
~~~
4. 這樣生成了組件后，他的值就會和對于設定的字段進行綁定，從而對其進行操作
5. 頁面寫好后，我們到路由配置文件`router.config.js`增加路徑
6. 打開系統點擊新增按鈕后發現頁面跳轉成功
## 表單提交
1. 頁面構建成功，接下來我們需要的就是提交表單的數據
2. 增加按鈕點擊事件
~~~
handleSubmit = e => {
e.preventDefault();
const { form } = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log(values)
}
});
};
~~~
~~~
const action = (
<Button type="primary" onClick={this.handleSubmit}>
提交
</Button>
);
~~~
3. 打開系統控制臺，輸入一些數據提交，查看打印正確
## 表單校驗
1. 為了保證業務數據的準確性，表單提交前需要做數據校驗
2. 我們先做一個最簡單的非空校驗，修改如下代碼
將原先的
~~~
{getFieldDecorator('title')(<Input placeholder="請輸入標題" />)}
~~~
修改為
~~~
{getFieldDecorator('title', {
rules: [
{
required: true,
message: '請輸入標題',
},
],
})(<Input placeholder="請輸入標題" />)}
~~~
3. 可以看到，在getFieldDecorator方法的入參中加入了一個json對象，值是rules，對應著校驗規則（更多內容請看官方文檔：https://ant.design/components/form-cn/）
~~~
{
rules: [
{
required: true,
message: '請輸入標題',
},
],
}
~~~
4. 打開系統，不輸入日期，點擊提交發現提示，校驗成功
## 對接接口
1. 到mockjs中新建api提交的接口，增加fakeSuccess返回
~~~
function fakeSuccess(req, res) {
const json = { code: 200, success: true, msg: '操作成功' };
return res.json(json);
}
const proxy = {
'GET /api/demo/list': getFakeList,
'GET /api/demo/detail': getFakeDetail,
'POST /api/demo/submit': fakeSuccess,
'POST /api/demo/remove': fakeSuccess,
};
export default delay(proxy, 1000);
~~~
2. 優化handelSubmit方法，增加submit方法傳入表單數據values供api調用
~~~
handleSubmit = e => {
e.preventDefault();
const { form } = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
submit(values).then(resp => {
if (resp.success) {
message.success('提交成功');
router.push('/platform/demo');
} else {
message.warn(resp.msg);
}
});
}
});
};
~~~
3. 打開系統點擊提交發現提交成功，network監聽傳遞參數無誤
4. 但是有一點需要注意的是，傳遞過去的日期類型并非標準的`YYYY-MM-DD HH:mm:ss`，所以需要再次優化下提交代碼
~~~
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);
}
});
}
});
};
~~~
5. 再次提交查看參數傳遞給接口的格式已經正確
6. 最后以下附上完整代碼
~~~
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 DemoAdd 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"
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 DemoAdd;
~~~