学习总结

                                                                                                 --学会思考,学会总结

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

你可能感兴趣的:(学习总结)