反應最終表單如何添加子表單

Question

讓沙箱與工作 React 表單數組https://codesandbox.io/s/react-final-form-field-arrays-react-beatiful-dnd-as-drag-drop-forked-uz24z?file=/index.js :5933-6061

其結果是點擊添加熱點並生成數據樹為

 {
   "toppings":[
      
   ],
   "customers":[
      {
         "id":4,
         "firstName":"name",
         "lastName":"lastname"
      },
      {
         "id":5,
         "firstName":"Clark",
         "lastName":"kent"
      }
   ],
   "hotspots":[
      {
         "hotspotId":6,
         "positionY":"Xhostspotforcustomer1",
         "positionX":"Yhostspotforcustomer1"
      }
   ]
}

但是，當單擊“添加熱點”按鈕（到 values.customers 數組的相同索引）時，我需要將熱點添加為客戶的子項，例如

{
   "toppings":[
      
   ],
   "customers":[
      {
         "id":4,
         "firstName":"name",
         "lastName":"lastname",
         "hotspots":[
            {
               "hotspotId":6,
               "positionY":"XhostspotforcustomerID4",
               "positionX":"YhostspotforcustomerID4"
            },
            {
               "hotspotId":7,
               "positionY":"more XhostspotforcustomerID4",
               "positionX":"new YhostspotforcustomerID4"
            }
         ]
      },
      {
         "id":5,
         "firstName":"Clark",
         "lastName":"kent",
         "hotspots":[
            {
               "hotspotId":8,
               "positionY":"XhostspotforcustomerID5",
               "positionX":"YhostspotforcustomerID5"
            }
         ]
      }
   ],
   
}

在index.js的174行添加了Add hotspot 如何修改代碼單獨添加每個客戶的熱點？

Answer 1

您需要將客戶字段名稱與熱點名稱結合起來：

• 當你做推/彈出：

push(`${name}.hotspots`, /*...*/)
//...
pop(`${name}.hotspots`)

• 也在 FieldArray 字段名稱中：

<FieldArray name={`${name}.hotspots`}>

演示： https : //codesandbox.io/s/react-final-form-field-arrays-react-beatiful-dnd-as-drag-drop-forked-wivwu?file=/index.js

結果：

{
  "toppings": [],
  "customers": [
    {
      "id": 4,
      "firstName": "name",
      "lastName": "lastname",
      "hotspots": [
        {
          "hotspotId": 6,
          "positionY": "Customer4-Y1",
          "positionX": "Customer4-X1"
        },
        {
          "hotspotId": 7,
          "positionY": "Customer4-Y2",
          "positionX": "Customer4-X2"
        }
      ]
    },
    {
      "id": 5,
      "firstName": "Clark",
      "lastName": "kent",
      "hotspots": [
        {
          "hotspotId": 8,
          "positionY": "Customer5-Y1",
          "positionX": "Customer5-X1"
        }
      ]
    }
  ]
}