--学会思考，学会总结
1、for循环中多次删除某个子项
在for循环中每次删除会导致list.length变小，致使原来的位置发生改变，所以，在每次删除之后需要对盖索引值-1
2、form表单学习
（1）、initialValue
form中，我们经常会使用initialValue去初始化数据，
（2）、validator
使用validator进行校验，在项目中，很多时候antd api中自带的校验无法满足我们的需求，我们需要自己进行额外的校验，就在rule中使用这个属性，然后给它指定一个函数去实现即可，但是如果validator函数里面也写了某个校验，rule里面也写了某个校验，就会导致这个校验的错误提示会出现两遍。
例如：
const validatorPrice = (rule, value, callback) => {
const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
if (detailInfo.limit_buy === '1') {
if (value) {
if ((!isNaN(value) && reg.test(value)) || value === '') {
callback()
} else {
callback("只能输入数字")
}
} else {
callback('不能为空')
}
} else {
callback()
}
}
{getFieldDecorator('limit_buy_number', {
rules: [{ validator: validatorPrice }],
})(
)}
（3）form表单全部用state数据存储，不使用initialValuek
很多情况下，不使用initialValue,在createForm的时候，直接拿到props之后，赋值给对应getFieldDecorator name的formItem 例如：obj里面的字段就是对用的getFieldDecorator里面的名字
{getFieldDecorator('limit_buy_number', {
rules: [{ validator: validatorPrice }],
})(
)}
const withConnect = connect(({ discountDetail, loading, app }) => ({ discountDetail, loading, app }))
(Form.create({
onFieldsChange(props, changedFields) {
// props.onChange(changedFields);
},
mapPropsToFields(props) {
let detailInfo =props.discountDetail.detailInfo;
let obj = {};
obj['name'] ={value:detailInfo.name};
return obj;
},
})(DiscountDetail))
export default WarnAboutUnsavedChanges(
withConnect,
state => state['discountDetail'].isDirty,
)
3、项目中经常用到的正则校验
（1）只能输入1-99的整数：(优惠折扣)
/^[1-9][0-9]?$/;
（2）只能输入数字（可以带小数) （价格）
/^(0|[1-9][0-9]*)(\.[0-9]*)?$/
（3）只能输入整数 （搜索编号）
/^[0-9]*$/
4、日期组件
现在的日期组件都需要加一个参数，需要定义它的类型为0bject，所以传入的值也应该是个object，so,在传入的值之前应该要用moment处理一下，例如：
//日期插件预处理
const config = {
rules: [{ type: 'object', required: true, message: '请选择时间!' }],
};
{getFieldDecorator('date_start', config, {
rules: [{ required: true, message: '活动开始时间不能为空' }],
})(
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="开始时间"
onOk={onStartTimeOk}
disabledDate={disabledDateStart}
allowClear={false}
disabled={detailInfo.progress !== 1 && detailInfo.discount_id ? true : false}
showToday={false}
onChange={onStartTimeOk}
/>
)}
form表单中传值
obj['date_start'] = {value:detailInfo.date_start &&
moment(detailInfo.date_start, 'YYYY-MM-DD HH:mm:ss' ) };
不可用日期：这个才是更让人头疼的处理
（1）开始时间不能早于当前时间 、如果结束时间选择了，开始时间不能超过结束时间
//开始时间的不可选日期
const disabledDateStart = (current) => {
let now = moment().format('YYYY-MM-DD');
let nowItem = moment(now).format('X')
if (detailInfo.date_end && detailInfo.date_end !== '') {//开始日期时间不能超过截止日期时间
let item = moment(detailInfo.date_end).format('YYYY-MM-DD');
let item2 = moment(current).format('YYYY-MM-DD');
if (current && (Number(nowItem) < Number(moment(current).format('X')) || Number(nowItem) === Number(moment(current).format('X')) ) &&
(Number(moment(item2).format('X')) < Number(moment(item).format('X')) || Number(moment(item2).format('X')) === Number(moment(item).format('X')))) {
return false;
} else {
return true
}
} else {
return moment().format('X') > Number(moment(current).format('X')) + 24 * 3600;
}
}
（2）结束时间不能早于当前时间，如果开始时间选择了，结束时间不能早于开始时间
//结束时间的不可选日期
const disabledDateEnd = (current) => {
let now = moment().format('X');
if (detailInfo.date_start && detailInfo.date_start !== '') {//开始时间不为空
let start = moment(detailInfo.date_start).format('X');//开始时间
if (start < now) {//开始时间小于当前时间 -》 跟当前时间比较
current = moment(current).format('X');
let nowItem = moment(Number(current)*1000).format('YYYY-MM-DD') + ' 23:59:59';
current = moment(nowItem).format('X')
return current && (Number(current) < Number(now) || Number(current) === Number(now))
} else {
return current && (Number(start) > Number(moment(current).format('X')) || Number(start) === Number(moment(current).format('X')))
}
} else {
return moment().format('X') > Number(moment(current).format('X')) + 24 * 3600;
}
}
4、模态框问题
1、使用模态框编辑数据的时候，有时候会导致第二次模态框的诗句仍是上一次的数据，这是因为模态框不会自动清除数据，需要自己手动清理，解决方案就是在visiable为true的时候才调用，例如：
{settingModalVisible ? :''}
网友评论