antd4.x必踩的坑（二）

1 antd的select和popover弹层当页面内容过高时滚动悬浮固定在页面某个位置

 如图。

解决办法：给select添加如下属性：

 getPopupContainer={(triggerNode) => triggerNode.parentNode}

<Space size="large">
          <span>定额应用管理</span>
          <Select
            defaultValue="0"
            onChange={selectType}
            style={{ width: '160px' }}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
          >
            <Option value="0">按产品类型展示</Option>
            <Option value="1">按门店展示</Option>
          </Select>
</Space>

  <Popover
        overlayClassName="popv-wrap"
        getPopupContainer={(trigger) => trigger}
        trigger="click"
        vshowCancel={false}
        content={FilteredForm}
        placement="topRight"
      >
        <Iconfont type="icon-guolv" className="filter" />
  </Popover>

对于popover做同样的处理。

2 如何处理定时任务，定时器的处理？

如下图。

 这个进度的形成是每隔一段时间请求后端的接口。然后重新赋值

import {useRef } from 'react';
function CopyToCombo(props) {
  let timer = useRef();

 const getProgress = () => {
    timer.current = setInterval(async () => {
      try {
        let res2 = await Service.getProcess();
        let { state, percent, msg } = res2.data;
        if (state == 1 || state == -1) {
          clearInterval(timer.current);
          timer.current = null;
          setProcessData({ state, percent: fix2(percent), msg });
          return;
        }
        setProcessData({ state, percent: fix2(percent), msg });
      } catch (err) {
        console.log('err', err);
        if (err.error == -1) {
          clearInterval(timer.current);
          timer.current = null;
          return;
        }
      }
    }, 200);
  };

  const endProgress = (num) => {
    clearInterval(timer.current);
    timer.current = null;
    let data = {};
    if (num == 1) {
      data = { state: 1, percent: 100, msg: '复制成功' };
    } else {
      data = { state: -1, percent: 0, msg: '复制失败' };
    }
    setProcessData(data);
    return;
  };

  Service.copyQuota(data).then(async (res) => {
        setIsShowProgress(true);
        if (res.code == 0) {
          let res2 = await Service.getProcess();
          let { state, percent, msg } = res2.data;
          if (state === 1) {
            endProgress(1);
          } else if (state == -1) {
            endProgress(-1);
          } else {
            getProgress();
          }
        }
      });
}