* Preface

After developing a project, I will summarize some problems encountered in the project. Also explore the causes of the problem. Without saying much, the summary of stepping on the pit begins again.

*Use the custom verification in the form form form of antd

<Form.Item label="User name">

              {getFieldDecorator('username', {

                rules: [

                  { required: true, message: 'User name cannot be empty' },

                  { validator: handleUserName}   //Use validator method and write your own verification method

                  ],

              })(<Input placeholder="enter one user name"  style={{width:260}}/>)}

</Form.Item>

Then write the validator method defined by yourself, and note that in any case, call callback(), otherwise the prompt of other verified Form.item on your page will not be displayed.

ps: my business logic here is that after the user enters the name, the user checks it backward and displays different prompts according to the returned results.

const handleUserName = function ( rule, value, callback ) {

        if(value){

          dispatch({

            ...

          }).then(result => {  //Use. then() to accept the return data of the model method

            if(result.code === 400){

              callback(result.msg);  // Be careful!! Call callback() in any case, or the verification in other places will not be displayed!

            } else {

              callback();   //Attention!! Call callback() in any case, or the verification in other places will not be displayed!

            }

          });

        } else {

          callback();  // Be careful!! Call callback() in any case, or the verification in other places will not be displayed!

        }

      })

    };

*How to get the data in the website?

The following example is the last field in the web address

1. law 1:

const pathArr = location.pathname.split('/');
const objectId = pathArr[pathArr.length-1]

The 2. law two:

import pathToRegexp from 'path-to-regexp';

const a = pathToRegexp('/employmentManagement/employmentDetail/:employmentId').exec(location.pathname);
console.log(a[1])

*Implement approval process settings

The interface is about this long (prototype):

![ScreenClip.png](/img/bVbzqvU)

Implementation difficulties:
1. Click div to turn into input input input box
2. After clicking Add, an input input input box is added at the bottom with the Add button.

The first step:

evaluatorList.map((item, index)=>(
    // Display current not currently selected as normal div
    // When clicking, trigger showEdit(), set the index of current click and inputVisible to true.
    {(current!== index) &&(
        <div onClick={showEdit.bind(this,item,index)} className={styles.name}>
            {item.evaluatorName}
        </div>
     )}
    // When inputVisible is true and current is the current index, div will not display, and EditSelect component (this component is an information input component) will be displayed.
    { (inputVisible && current === index) &&(
        <EditSelect id='selectFocusId'/>
    )}
    <div className={styles.operation}></div>
))

The second step:

Idea: at the beginning, I felt dizzy about using ref to bind dom to add nodes.

The normal way of thinking is to control data to achieve new style changes.
Because the above styles are expanded by traversing the evaluatorList. When clicking Add, we insert an empty object in the corresponding position of the evaluator list. At this time, the page is about to achieve the desired effect.
Then set inputVisible to true and current: index+1, which can change the current newly added div into the input box state.

// Newly added
    const handleAdd =(item, index)=>{
      if(!isAdd){  // isAdd is false by default. It is judged here to prevent it from being closed when clicking Add. Open a new add again.
        let tempList = JSON.parse(JSON.stringify(evaluatorList))
        tempList.splice(index+1,0,{})
        dispatch({
          type:"approvalManagement/updateStates",
          payload:{
            evaluatorList: tempList,
            inputVisible: true,
            current: index+1,
            isAdd: true 
          }
        })
      }
    }

* conclusion

It's done, over