用n个标签创建表单为代表值的字段

Question

我想创建一个 tag 代表由API给出的字符串数组的列表。

import { Tag } from 'antd'

const TagList = () => {
   const items = ['Tag1', 'Tag2', 'Tag3'];

   return (
      <>
        {
           items.map((item) => (
              <Tag>{item}</Tag>
           )
        }
      </>
   )
}

我如何将其包装在a form.list.list 中，以便最终我可以将数据阵列发送回API端点？用例如重新排序的项目，例如['tag3'，'tag1'，'tag2']

我的第一种方法就像

<Form.List name={props.tagListName} initialValue={items}>
   {(fields, { add, remove, move }) => {
      return (
         <div>
            {fields.map((field) => (
               <>
                  <Form.Item {...field}>                  
                     <CustomTagComponent
                        name={id}
                        closable={items.length > 1}
                        isDrag={activeId === id}
                        handleClose={onClose}
                     />
                  </Form.Item>
               </>
            ))}
         </div>
      )
   }}
</Form.List>

我尝试将项目作为初始值添加到列表中，但这没有奏效。

如何创建items.length标签，并结合包含这些值的表单？

Answer 1

好吧，我想我找到了一个解决方案：

创建 codesandbox < /a>为此。

评论，意见或更好的解决方案赞赏:)