Js – Code tips

1. InputNumber Only positive integers can be entered

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

 <InputNumber
            placeholder="Please enter"
            className={styles.input}
            min={0}
            onChange={(value) = > setConfigId(value)}
            formatter={limitDecimals}
            parser={limitDecimals}
            value={configId}
          />
Copy the code

2. Async/await cannot be used in forEach

Call the interface with async/ await in forEach, render the data to the page, find it cannot render

Async /await cannot be used in forEach, use for of instead

3. Map and forEach cannot terminate a loop, but can achieve the same effect without returning a value

4. Achieve click the button, scroll bottom effect

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

Developer.mozilla.org/zh-CN/docs/…

6. Antd – This repair is not easy, really want to see more

 {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')]}) (<RangePicker
                                ref={el= >{ 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]]); }} / >
                            )}
Copy the code

7. Configure the title

 <>
   {actionType === "sms" && "SMS Configuration"}
   {actionType === "qianniu" && "Thousand Ox configuration"}
   {actionType === "alimeMessage" && "Honey news."}
   {actionType === "outbound" && "Smart Outbound call"} < >Copy the code

8. Iterate over variables? .map, -> prevent variables from being undefined or null.

9. {key: value} display object.keys ().map

10. Initialize a Map with a two-dimensional array

const ruleTypeTagMap: Map<RuleType, TagModel> = new Map([
  [
    RuleType.Keyword,
    {
      background: '#006DD5'.text: 'word',}]]);Copy the code

Let kvArray = [[“key1”, “value1”], [“key2”, “value2”]]; let kvArray = [[“key1”, “value1”]];

// Use the regular Map constructor to convert a two-dimensional array of key-value pairs into a Map object

let myMap = new Map(kvArray);

myMap.get(“key1”); // Return “value1”

The array. from function converts a Map object into a two-dimensional Array of key-value pairs

console.log(Array.from(myMap)); // Print the same array as kvArray

// A more concise way to do the same thing above is to use the expansion operator console.log([…myMap]);

Console. log(array.from (mymap.keys ()))); // output [“key1”, “key2”]

11. Null and undefined cannot be used in object. keys

Object. The keys (UtouchMainBO DynEventAttrDO | | {}) this time really is the teaching of the blood of a mature programmers to remember oh