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)

实现难点：
1、点击div后变成input输入框
2、点击新增后，在下方多出一个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