React阶段性总结

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， *

	*

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
	

8，字符串转日期

//格式化日期
import moment from 'moment';
('789456123').format('YYYY')
moment('789456123', '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>