react+dva+antd 後臺管理項目問題彙總

* 前言

開發完一個項目，如今將總結一下項目中遇到的一些問題。也探討一下問題出現的緣由。話很少說，踩坑總結又開始了。

* 使用antd的form表單裏的自定義校驗

<Form.Item label="用戶名">

              {getFieldDecorator('username', {

                rules: [

                  { required: true, message: '用戶名不能爲空' },

                  { validator: handleUserName}   // 使用validator方法 後面寫本身校驗的方法

                  ],

              })(<Input placeholder="請輸入用戶名"  style={{width:260}}/>)}

</Form.Item>

而後編寫本身定義的validator方法，注意不管何種狀況都要調用callback()，不然你頁面其餘校驗的Form.item的提示將不顯示。

ps:我這裏的業務邏輯是用戶輸入名字後，向後端檢驗，根據返回結果顯示不一樣的提示。

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

        if(value){

          dispatch({

            ...

          }).then(result => {  // 使用.then()能夠接受 model方法的return的數據

            if(result.code === 400){

              callback(result.msg);  // 注意！！不管何種狀況都要調用callback()，不然其餘地方的驗證會不顯示！

            } else {

              callback();   // 注意！！不管何種狀況都要調用callback()，不然其餘地方的驗證會不顯示！

            }

          });

        } else {

          callback();  // 注意！！不管何種狀況都要調用callback()，不然其餘地方的驗證會不顯示！

        }

      })

    };

* 如何獲取網址裏的數據？

如下例子爲網址中最後一個字段

1. 法一：

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

2.法二：

import pathToRegexp from 'path-to-regexp';

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

* 實現審批流設置

界面大概長這樣（原型圖）：

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

實現難點：
一、點擊div後變成input輸入框
二、點擊新增後，在下方多出一個input輸入框，而且帶有新增按鈕

解決第一步：

evaluatorList.map((item, index)=>(
    // 把不是當前選擇的current顯示爲正常的div
    // 點擊時觸發showEdit()，把current當前點擊的index、把inputVisible置爲true
    {(current!== index) &&(
        <div onClick={showEdit.bind(this,item,index)} className={styles.name}>
            {item.evaluatorName}
        </div>
     )}
    // 當inputVisible爲true而且 current是當前index時，div不顯示，顯示EditSelect 組件（該組件是一個信息輸入組件）
    { (inputVisible && current === index) &&(
        <EditSelect id='selectFocusId'/>
    )}
    <div className={styles.operation}></div>
))

解決第二步：

思路：一開始以爲要用ref綁定dom進行節點增長操做，這個一想就很頭暈對吧。

正常的思路應該是經過操控數據來實現新增的樣式變化。
由於上面的樣式都是經過遍歷evaluatorList來展開的。點擊新增的時候，咱們在evaluatorList的對應位置，插入一個空對象。這時頁面已經快達到理想效果了。
再把inputVisible置爲true、 current: index+1，這樣能夠把當前新增的div變成輸入框狀態。

// 新增
    const handleAdd =(item, index)=>{
      if(!isAdd){  // isAdd默認爲false，這裏判斷是防止點擊新增時這個沒有關閉，再次打開一個新的新增
        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 
          }
        })
      }
    }

* 結語

寫完了，over