antd Pro組件ProFormList自定義action

ProFormList是ant design pro的結(jié)構(gòu)化數(shù)據(jù)組件，通常用來實(shí)現(xiàn)動(dòng)態(tài)表單。
現(xiàn)在有個(gè)需求，除了組件自帶的刪除和復(fù)制，還需要增加兩個(gè)按鈕來實(shí)現(xiàn)每個(gè)item位置的上下移動(dòng)，如圖所示：

查看官方文檔，組件有提供自定義action的API--actionRender，介紹如下

/**
   * @name 自定義操作按鈕
   *
   * @example 刪除按鈕
   * actionRender:(field,action)=><a onClick={()=>action.remove(field.name)}>刪除</a>
   * @example 最多只能新增三行
   * actionRender:(f,action,_,count)=><a onClick={()=>
   *   count>2?alert("最多三行！"):action.add({id:"xx"})}>刪除
   * </a>
   */
  actionRender?: (
    field: FormListFieldData,
    /**
     * 操作能力
     * @example  action.add(data) 新增一行
     * @example  action.remove(index) 刪除一行
     * @example  action.move(formIndex,targetIndex) 移動(dòng)一行
     */
    action: FormListOperation,
    /**
     * 默認(rèn)的操作dom
     * [復(fù)制，刪除]
     */
    defaultActionDom: ReactNode[],
    /**
     * 當(dāng)前共有幾個(gè)列表項(xiàng)
     */
    count: number,
  ) => ReactNode[];

API提供的參數(shù)--action提供了移動(dòng)位置的方法action.move(formIndex,targetIndex)，只需要傳入當(dāng)前位置索引和目標(biāo)位置索引即可。

那現(xiàn)在的問題就是如何知道當(dāng)前操作的item索引位置呢，官方文檔寫的不是很詳細(xì)。研究了一會(huì)，奧秘竟在field參數(shù)中！
打印一下三個(gè)item的field

{
    "name": 0,
    "key": 0,
    "isListField": true,
    "fieldKey": 0,
    "uuid": "fbf3b67a-345b-4645-ad0e-5bef325a8c39"
}
{
    "name": 1,
    "key": 1,
    "isListField": true,
    "fieldKey": 1,
    "uuid": "2f8a7f5a-34f2-456e-8816-6ab0b6e72332"
}
{
    "name": 2,
    "key": 2,
    "isListField": true,
    "fieldKey": 2,
    "uuid": "926653b6-df29-447a-bd40-a16a178e251a"
}

嘗試執(zhí)行move(0,1)后，再次打印對(duì)比uuid發(fā)現(xiàn)，name的值正是list索引，且隨數(shù)組動(dòng)態(tài)變化的，那就好辦了,你早說嘛真是的。
于是答案呼之欲出：

 actionRender={(field, action, defaultActionDom, count) => {
          return [
            ...defaultActionDom,
            <ArrowUpOutlined
              key="up_arrow"
              style={{ marginLeft: '5px' }}
              onClick={() => {
                if (field.name === 0) {
                  //位于第一個(gè),移動(dòng)到最后一個(gè)
                  action.move(field.name, count - 1);
                } else {
                  action.move(field.name, field.name - 1);
                }
              }}
            />,
            <ArrowDownOutlined
              key="down_arrow"
              style={{ marginLeft: '5px' }}
              onClick={() => {
                if (field.name === count - 1) {
                  //位于最后一個(gè)，移動(dòng)到第一個(gè)
                  action.move(field.name, 0);
                } else {
                  action.move(field.name, field.name + 1);
                }
              }}
            />,
          ];
        }}

defaultActionDom直接挪過來，增加判斷：當(dāng)item位于第一個(gè)時(shí)向上移動(dòng)到最后一個(gè)，位于最后一個(gè)時(shí)向下移動(dòng)到第一個(gè)，搞定文章來源地址http://www.zghlxwxcb.cn/news/detail-749297.html

到了這里，關(guān)于antd Pro組件ProFormList實(shí)現(xiàn)自定義action的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！