前端代码技巧 - js(1)

1. InputNumber 只允许输入正整数

  const limitDecimals = (value: string | undefined | number) => {
    return String(value).replace(/^(0+)|[^\d]+/g, "");
  };

  setConfigId(value)}
            formatter={limitDecimals}
            parser={limitDecimals}
            value={configId}
          />

2. forEach中不能使用async / await

现象： 在forEach中使用async/ await调用接口，将获取的数据渲染到页面上，发现无法渲染

解决：async/await不能在forEach中使用,用for of代替

3. map和forEach不能终止循环，但是可以不返回值（直接return）达到同样的效果

现象: 获取用户尾号列表循环调用
解决: 和风简沟通后不用useGet了， 改用request发送请求，用useEffect控制

5. 实现点击按钮，滚动到底部效果

    const ele = document.getElementsByClassName('tree-node-eidt')[0];
    ele.scrollIntoView(true / obj)

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

6. antd - 这个修的太不容易了，真的要多看一下

 {getFieldDecorator(
                              'qualityCheckModelDTO.timeRange',
                              {
                                rules: [
                                  {
                                    required: true,
                                    message: i18nAtc(
                                      'quality.Component.ProjectForm.bi_tian'
                                    )
                                  }
                                ],
                                initialValue:
                                  shouldRefill &&
                                  dataSource.qualityCheckModelDTO
                                    ? dataSource.qualityCheckModelDTO.timeRange
                                    : [
                                      moment('00:00:00', 'HH:mm:ss'),
                                      moment('23:59:59', 'HH:mm:ss')
                                    ]
                              }
                            )(
                               {
                                  this.rangePicker = el;
                                }}
                                style={{ width: '100%' }}
                                format="YYYY-MM-DD HH:mm:ss"
                                disabledDate={currentDate => {
                                  return this.isDateDisAble(currentDate);
                                }}
                                showTime={{
                                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
                                }}
                                onCalendarChange={(dates) => {
                                  let newDate
                                  if (dates.length === 1) {
                                    newDate = dates[0].hours(0).minutes(0).seconds(0)
                                  } else {
                                    newDate = dates[0]
                                  }
                                  setFieldsValue({
                                    'qualityCheckModelDTO.timeRange': [newDate, dates[1]]
                                  })
                                  this.changeRange([newDate, dates[1]]);
                                }}
                              />
                            )}