悬浮关闭，从表单获取id，实时验证，下拉菜单，字符串转日期，页面自己定到错误的地方，按照词根进行分类，提示

1,悬浮关闭按钮

<div className="ant-drawer-footer" style={{ width: '600' }}> <Button style={{ marginLeft: 8 }} onClick={this.props.onClose}> 关闭 </Button> </div>

2,抽屉的关闭按钮

closable={true} // 小叉叉 maskClosable={true} destroyOnClose={true}

3,从表单获取id

一般回显的id给修改的id附不上值时，从表单里获取id的值

id:this.props.form.getFieldValue('id') name: this.props.form.getFieldValue('name') {getFieldDecorator('id', { initialValue: this.props.id || '' })(<Input type="hidden" />)}

4,实时验证

<Form.Item> {getFieldDecorator('name', { validateTrigger: 'onBlur', rules: [ { required: true, message: '请输入字典名称' }, { pattern: /^[^\s]*$/, message: '不能输入空格' }, { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9()（）]+$/, message: '不能输入特殊字符,只可以输入括号' }, { validator: this.inputOnBlurname } ], initialValue: this.props.name })(<Input placeholder="字典名称" />)} </Form.Item> /** * 校验字典名称是否重复 * @return {[type]} [description] */ inputOnBlurname = (rule, value, callback) => { POST(HTTP_DEP + '/dict/isnotname', { id: this.props.id, pid: this.props.pid, name: this.props.form.getFieldValue('name') }).then(function(res) { if (res.state === '1') { callback(); } else { callback('字典名称重复'); } }); };

5， *

<span className="color-red">*</span>

6，下拉菜单

import React, { Component } from 'react'; import { Icon, Menu, Dropdown, Avatar } from 'antd'; import { connect } from 'react-redux'; import { browserHistory } from 'react-router'; <Dropdown overlay={work} trigger={['click']}> <li style={{ paddingRight: '22PX' }}> <Avatar icon="carry-out" /> </li> </Dropdown> const work = ( <Menu> <Menu.Item style={styles.workTitle} > <a href="javascript:void(0)" style={{color: '#1990ff'}} > 我的文档库 </a> </Menu.Item> { this.state.dataList.map((item, index) => { let { extension } = item; let fileIcon; if(extension == 'txt') { fileIcon = 'file-text'; } else if(extension == 'xls' || extension == 'xlsx') { fileIcon = 'file-excel'; } else if(extension == 'doc' || extension == 'docx') { fileIcon = 'file-word'; } else if(extension == 'pdf') { fileIcon = 'file-pdf'; } else if(extension == 'ppt' || extension == 'pptx') { fileIcon = 'file-ppt' } else { fileIcon = 'file-zip' } return ( <Menu.Item key={index} style={styles.workItem}> <a href="javascript:void(0)" style={{color: '#808080'}} onClick={() => this.downloadFile(item)}> <Avatar style={{ backgroundColor: '#3391e5', marginRight: '15px' }} icon={fileIcon} /> {item.name} </a> </Menu.Item> ) }) } { this.state.dataList.length > 0 && <Menu.Item style={styles.workFooter}> <a href="javascript:void(0)" onClick={this.more}> 查看更多 </a> </Menu.Item> } { this.state.dataList.length == 0 && <Menu.Item style={styles.workFooter}> <a href="javascript:void(0)"> 暂无数据 </a> </Menu.Item> } </Menu> ); /** * 下载方法 * @param {[type]} record [description] * @return {[type]} [description] */ downloadFile = record => { let { id, extension } = record; PostExcelFile({ url: HTTP_DEP + '/, fileType: extension, type: 'get' }); }; const styles = { headerUl: { display: 'flex', width: '400px', height: '100%', listStyle: 'none', justifyContent: 'flex-end', alignItems: 'center', paddingLeft: 0, paddingRight: '15px' }, iconFont: { padding: '0 12px' }, headerItem: { paddingRight: '6px' }, userStyle: { position: 'absolute', left: 0, bottom: 0, width: '100%', borderTop: '1px solid #e9e9e9', padding: '10px 16px', background: '#fff', textAlign: 'right' }, workTitle: { textAlign: 'center', borderBottom: '1px solid rgb(232, 232, 232)', paddingTop: '10px', paddingBottom: '10px' }, workItem: { width: '330px', paddingTop: '12px', paddingBottom: '12px', paddingLeft: '24px', paddingRight: '24px', color: '14px', borderBottom: '1px solid rgb(232, 232, 232)' }, workFooter: { width: '330px', textAlign: 'center', paddingTop: '10px', paddingBottom: '10px' } };

7，loading

this.state = { loading: false // 页面加载 }; 自定义开始loading <Spin spinning={this.state.loading}></Spin>

8，字符串转日期

//格式化日期 import moment from 'moment'; 列表：return moment(text).format('YYYY-MM-DD'); 表单：this.state.data.create_time? moment(this.state.data.create_time ? new Date(this.state.data.create_time) : '', 'YYYY-MM-DD') 传参： values['createTime'] = values['createTime'] ? values['createTime'].format('YYYY-MM-DD') : ''; : ''

9,页面自己定到错误的地方

handleSubmit = e => { let that = this; e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { that.saveSigneding(values); } }); };

10,防止输入的字超过数据库的限制

<Form.Item> {getFieldDecorator('sdf', { rules: [ { max: 16, message: '最长可输入16个字符' } ], initialValue: '' })(<Input />)} </Form.Item>

11,按照词根进行分类

/** * 把form 表单的数据安照词根进行分类 * @param {[type]} data [description] * @param {[type]} array [description] * @return {[type]} [description] */ const formtFormToMap = (data, array) => { let obj = {}; // 先把数据进行大的归类 for (let key in data) { for (let i = 0; i < array.length; i++) { // 判断是否存在子项 if (!obj[array[i]]) { obj[array[i]] = {}; } let reg = new RegExp(array[i] + '_'); if (reg.test(key)) { let _key = key.replace(reg, ''); obj[array[i]][_key] = data[key] || ''; } } } return obj; };

12，各个子组件相互调用取值

1，在子组件想获取的值的地方加

let id = res.approvalId; that.props.setApprovalId(id);

2，在父组件里面写

setApprovalId = id => { this.setState({ approvalId: id }); }; setApprovalId={this.setApprovalId}

在把值丢进自己想丢的地方

13，提示

import {Popover,Icon} from 'antd'; <Popover title={'提示'} content={ <span> 限制立项申请时间到期望完成时间的月数参数 </span> } > <Icon type="question-circle" style={{ marginLeft: '5px', position: 'absolute' }} /> </Popover>

14 日期不可选 disableDate

<DatePicker onBlur={this.budgetCostChange} disabledDate={this.disabledStartDate} format="YYYY-MM-DD" placeholder="年/月/日" style={{ width: '100%' }} /> disabledStartDate = startValue => { let endDate = this.props.form.getFieldValue('item5') if (!endDate) { return false; } let start = startValue.format('YYYY-MM-DD HH:mm:SS').valueOf() ? startValue.format('YYYY-MM-DD HH:mm:SS').valueOf() : ''; let end = endDate.format('YYYY-MM-DD HH:mm:SS').valueOf() ? endDate.format('YYYY-MM-DD HH:mm:SS').valueOf() : ''; if (start > end) { return true } }