学习总结

                                                                                                 --学会思考,学会总结

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 ? :''}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容