1、DatePicker
问题描述：不允许选择当前时间之前的时间；
解决方法：
<DatePicker showNow={false} format="YYYY-MM-DD HH:mm:ss" disabledDate={disabledDate} disabledTime={disabledTime} showTime /> const range = (start: any, end: any) => { const result = []; for (let i = start; i < end; i++) { result.push(i); } return result; } const disabledDate = (current: any) => current && current < moment().endOf('day').subtract(1, "days"); const disabledTime = (date: any) => { const hours = moment().hours(); const minutes = moment().minutes(); const seconds = moment().seconds(); // 当日只能选择当前时间之后的时间点 if (!date) { return { disabledHours: () => range(0, 24), disabledMinutes: () => range(0, 60), disabledSeconds: () => range(0, 60) }; } if (date && moment(date).date() === moment().date()) { return { disabledHours: () => { if (moment(date).date() === moment().date()) { return range(0, 24).splice(0, hours) } }, disabledMinutes: () => { if (moment(date).hours() === moment().hours()) { return range(0, 60).splice(0, minutes + 1) } }, disabledSeconds: () => { if (moment(date).hours() === moment().hours() && moment(date).minutes() === moment().minutes()) { return range(0, 60).splice(0, seconds + 1) } } }; } return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] }; };
2、FormList中嵌套FormList使用；
案例描述：活动为动态增减，且每个活动下对应的嘉宾也是动态增减的；
解决方案：
<Form.List name='topics'> { fields => { return ( <Tabs> {fields.map((field, index) => { return ( < TabPane tab={topicTitleList[index]} key={index} forceRender={true}> <div> <FormItem labelCol={ { xs: { span: 24 }, sm: { span: 12 } } } wrapperCol={ { xs: { span: 24 }, sm: { span: 12 } } } name={[field.name, 'name']} fieldKey={[field.fieldKey, 'name']} label="活动名称" rules={[{ required: true, message: '请填写活动名称', }]} > <Input maxLength={20} placeholder="请输入..." /> </FormItem> <Form.List name={[field.name, 'guests']}> { (itemFields, { add, remove }) => { return (<div> { itemFields.map((item, itemIndex) => { <FormItem labelCol={ { xs: { span: 24 }, sm: { span: 12 } } } wrapperCol={ { xs: { span: 24 }, sm: { span: 12 } } } name={[item.name, 'name']} fieldKey={[item.fieldKey, 'name']} label="嘉宾姓名" rules={[{ required: true, message: '请填写嘉宾姓名', }]} > <Input maxLength={20} placeholder="请输入..." /> </FormItem> })} </div>) } } </Form.List> </div> </TabPane> ) })} </Tabs> ) } } </Form.List >
3、Upload上传限制文件格式；
问题描述：通过设置accept接受上传的文件类型，发现当选择所有文件上传时，还是可以选择其他格式的文件进行上传；
解决方案：beforeUpload 返回 false 或 Promise.reject 时，只用于拦截上传行为，不会 阻止文件进入上传列表（原 因）。如果需要阻止列表展现，可通过返回 Upload.LIST_IGNORE 实现。
<Upload accept="image/*" listType="picture" beforeUpload={(file) => { if (file.type === "image/png") { handleGuestsChange(file, customData[index].guests[itemIndex].id) } else { message.error("请上传png图片文件！ "); return Upload.LIST_IGNORE; } } } </Upload>
