Antd组件常见问题

2023-11-13 17:37:58

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 实现。

码农公寓

相关文章