reactjs - React final 表单如何添加子表单
问题描述
让沙箱与有效的 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 行添加的 如何修改代码以分别为每个客户添加热点?
解决方案
您需要将客户字段名称与热点名称结合起来:
- 当你推/弹出:
push(`${name}.hotspots`, /*...*/)
//...
pop(`${name}.hotspots`)
- 也在 FieldArray 字段名称中:
<FieldArray name={`${name}.hotspots`}>
结果:
{
"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"
}
]
}
]
}
推荐阅读
- python - Pandas 中的 Lambda 操作
- python - 从从 Tableau 画布动态加载的页面中抓取与冠状病毒相关的数据(我认为......)
- ms-access-2016 - 无法在 MS Access 2016 中查看表单和查询
- python-3.x - 将 2019-01-01:01 字符串转换为日期时间
- ruby-on-rails - 未在生产日志中显示 uuid
- python - 有没有办法我可以创建一个 for 循环,遍历不同的值以在 sqlite3 查询中搜索
- linux - 如果将脚本通过管道传输到 bash,则出现奇怪的 adb 行为
- python - 在 xarray 中使用 Dask 并行化来选择数据
- http - 颤振 x-www-form-urlencoded POST 请求
- android - 为什么我的搜索栏亮度设置被锁定以进行更改,我该如何解决