Form.Item 使用中的一些疑问
来源:14-13 -开发QuestionRadio属性表单-可动态添加删除选项

慕粉3946981
2023-05-20
老师,你好。我这边学习14-13开发QuestionRadio组件时,对 Form.Item 组件中一些属性含义理解不确定 (阅读文档发现这块并没有详细描述) ,下面描述是否正确?
<Form
layout="vertical"
initialValues={{ title, isVertical, value, options }}
disabled={disabled}
form={form}
onValuesChange={handleValuesChange}
>
<Form.Item label="选项">
<Form.List name="options">
{(fields, { add, remove }) => (
<>
{
fields.map(({ key, name }, index) => {
return (
<Space key={key} align="baseline">
<Form.Item
name={[name, "text"]}
rules={[{ required: true }]}
>
<Input placeholder="输入选项文字"></Input>
</Form.Item>
{index > 1 && <DeleteOutlined onClick={() => remove(index)} />}
</Space>
)
})
}
<Form.Item>
<Button
block
type="link"
onClick={() => add()}
icon={<PlusOutlined />}
>
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
- Form.List 组件使用的
name
属性值来自 Form 组件属性的initialValues
中 - Form.List 组件
children
回调函数的第一个参数fields
数组里面的每个对象关联 Form.List 组件属性中 name 的值,我不理解为什么 fields 中有这么多字段比如:{name: 0, key: 0, isListField: true, fieldKey: 0}
,这些字段代表什么含义? - Form.Item 组件
children
中Form.Item
组件name={[name, "text"]}
是使用当前遍历对象中 text 字段与子组件Input
中value
关联到一起。
这块应该再讲细一些就好了,毕竟这个 Form.List 组件还是相对有些复杂。
写回答
1回答
-
双越
2023-05-21
建议可以先去找 AntDesign 相关部分的文档看看,文档里讲的非常详细。
看完有问题,可结合文档,再回复我。
022023-05-22
相似问题
关于不使用 useEffect 的疑问
回答 1
导入 MouseEvent 疑问
回答 2