ant-design/f2a58942-async.519529bd.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["f2a58942"],{f2a58942:function(e,a,n){"use strict";n.d(a,"__esModule",{value:!0}),n.d(a,"texts",{enumerable:!0,get:function(){return t;}}),n("15d17c0b");let t=[{value:"During the form development process, there are occasional needs for combining attributes. The UI display fields are different from the backend data structure fields. For example, when interfacing with the backend, the province and city fields are often defined as two separate fields ",paraId:0},{value:"{ province: Beijing, city: Haidian }",paraId:0},{value:", rather than a combined one ",paraId:0},{value:"{ province: [Beijing, Haidian] }",paraId:0},{value:". Therefore, it is necessary to handle the values in ",paraId:0},{value:"initialValues",paraId:0},{value:" and ",paraId:0},{value:"onFinish",paraId:0},{value:" as follows:",paraId:0},{value:"import React from 'react';\nimport { Cascader, Form } from 'antd';\n\nconst data = { province: 'Beijing', city: 'Haidian' };\nconst options = [\n  { value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou' }] },\n  { value: 'jiangsu', label: 'Jiangsu', children: [{ value: 'nanjing', label: 'Nanjing' }] },\n];\nconst createUser = (values) => console.log(values);\n\nconst Demo = () => (\n  <Form\n    initialValues={{ province: [data.province, data.city] }}\n    onFinish={(values) => {\n      const { province, ...rest } = values;\n      createUser({ province: province[0], city: province[1], ...rest });\n    }}\n  >\n    <Form.Item label=\"Address\" name=\"province\">\n      <Cascader options={options} placeholder=\"Please select\" />\n    </Form.Item>\n  </Form>\n);\nexport default Demo;\n",paraId:1},{value:"When the form is relatively simple, it's manageable, but when encountering a ",paraId:2,tocIndex:0},{value:"Form.List",paraId:2,tocIndex:0},{value:" scenario, it becomes necessary to process the values using ",paraId:2,tocIndex:0},{value:"map",paraId:2,tocIndex:0},{value:", which can become quite complex. Therefore, we need to encapsulate an aggregated field component to enable a single ",paraId:2,tocIndex:0},{value:"Form.Item",paraId:2,tocIndex:0},{value:" to handle multiple ",paraId:2,tocIndex:0},{value:"name",paraId:2,tocIndex:0},{value:" attributes.",paraId:2,tocIndex:0},{value:"To implement the aggregation field functionality, we need to utilize ",paraId:3,tocIndex:1},{value:"getValueProps",paraId:3,tocIndex:1},{value:", ",paraId:3,tocIndex:1},{value:"getValueFromEvent",paraId:3,tocIndex:1},{value:", and ",paraId:3,tocIndex:1},{value:"transform",paraId:3,tocIndex:1},{value:" to facilitate the transformation of data from ",paraId:3,tocIndex:1},{value:"FormStore",paraId:3,tocIndex:1},{value:" and to re-insert the structure into ",paraId:3,tocIndex:1},{value:"FormStore",paraId:3,tocIndex:1},{value:" upon change.",paraId:3,tocIndex:1},{value:"By default, ",paraId:4,tocIndex:2},{value:"Form.Item",paraId:4,tocIndex:2},{value:" passes the field value from ",paraId:4,tocIndex:2},{value:"FormStore",paraId:4,tocIndex:2},{value:" as the ",paraId:4,tocIndex:2},{value:"value",paraId:4,tocIndex:2},{value:" prop to the child component. However, with ",paraId:4,tocIndex:2},{value:"getValueProps",paraId:4,tocIndex:2},{value:", you can customize the ",paraId:4,tocIndex:2},{value:"props",paraId:4,tocIndex:2},{value:" that are passed to the child component to implement transformation functionality. In an aggregation scenario, we can iterate through ",paraId:4,tocIndex:2},{value:"names",paraId:4,tocIndex:2},{value:" and combine the values from ",paraId:4,tocIndex:2},{value:"FormStore",paraId:4,tocIndex:2},{value:" into a single ",paraId:4,tocIndex:2},{value:"value",paraId:4,tocIndex:2},{value:" that is then passed to the child component:",paraId:4,tocIndex:2},{value:"getValueProps={() => ({ value: names.map((name) => form.getFieldValue(name)) })}\n",paraId:5,tocIndex:2},{value:"When the child component modifies the value, the ",paraId:6,tocIndex:3},{value:"setFields",paraId:6,tocIndex:3},{value:" method is used to set the aggregated ",paraId:6,tocIndex:3},{value:"value",paraId:6,tocIndex:3},{value:" returned by the child component to the corresponding ",paraId:6,tocIndex:3},{value:"name",paraId:6,tocIndex:3},{value:", thereby updating the values of ",paraId:6,tocIndex:3},{value:"names",paraId:6,tocIndex:3},{value:" in ",paraId:6,tocIndex:3},{value:"FormStore",paraId:6,tocIndex:3},{value:":",paraId:6,tocIndex:3},{value:"getValueFromEvent={(values) => {\n    form.setFields(names.map((name, index) => ({ name, value: values[index] })));\n    return values[0];\n}}\n",paraId:7,tocIndex:3},{value:"In ",paraId:8,tocIndex:4},{value:"rules",paraId:8,tocIndex:4},{value:", the default provided ",paraId:8,tocIndex:4},{value:"value",paraId:8,tocIndex:4},{value:" for validation originates from the value passed to the corresponding ",paraId:8,tocIndex:4},{value:"name",paraId:8,tocIndex:4},{value:" when the child component changes. Additionally, it is necessary to retrieve the values of ",paraId:8,tocIndex:4},{value:"names",paraId:8,tocIndex:4},{value:" from ",paraId:8,tocIndex:4},{value:"FormStore",paraId:8,tocIndex:4},{value:" and use the ",paraId:8,tocIndex:4},{value:"transform",paraId:8,tocIndex:4},{value:" method to modify the ",paraId:8,tocIndex:4},{value:"value",paraId:8,tocIndex:4},{value:" of ",paraId:8,tocIndex:4},{value:"rules",paraId:8,tocIndex:4},{value:":",paraId:8,tocIndex:4},{value:"rules={[{\n  transform: () => {\n    const values = names.map((name) => form.getFieldValue(name));\n    return values;\n  },\n}]}\n",paraId:9,tocIndex:4},{value:"By doing so, we have implemented a feature that allows for operating multiple ",paraId:10,tocIndex:6},{value:"names",paraId:10,tocIndex:6},{value:" within a ",paraId:10,tocIndex:6},{value:"Form.Item",paraId:10,tocIndex:6},{value:", making the form logic clearer and easier to maintain.",paraId:10,tocIndex:6},{value:"In addition to the ",paraId:11,tocIndex:6},{value:"Cascader",paraId:11,tocIndex:6},{value:" example in the text, it is also applicable to components such as ",paraId:11,tocIndex:6},{value:"DatePicker.RangePicker",paraId:11,tocIndex:6},{value:". In other words, this method can be used in any scenario that requires the aggregation of multiple fields.",paraId:11,tocIndex:6},{value:"Additionally, there are some edge cases in this example that have not been considered. For instance, ",paraId:12,tocIndex:6},{value:"setFields([{ name:'city', value:'nanjing' }])",paraId:12,tocIndex:6},{value:" will not update the selected value of ",paraId:12,tocIndex:6},{value:"Cascader",paraId:12,tocIndex:6},{value:". To achieve a refresh effect, you need to add ",paraId:12,tocIndex:6},{value:"Form.useWatch(values => resetNames.map(name => get(values, name)), form);",paraId:12,tocIndex:6},{value:".",paraId:12,tocIndex:6},{value:"Feel free to explore more edge cases and handle them as needed.",paraId:13,tocIndex:6}];}}]);