Form.Item 使用中的一些疑问

Question

老师，你好。我这边学习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>

1. Form.List 组件使用的 name 属性值来自 Form 组件属性的 initialValues 中
2. Form.List 组件 children 回调函数的第一个参数 fields 数组里面的每个对象关联 Form.List 组件属性中 name 的值，我不理解为什么 fields 中有这么多字段比如: {name: 0, key: 0, isListField: true, fieldKey: 0}，这些字段代表什么含义？
3. Form.Item 组件 children 中 Form.Item 组件 name={[name, "text"]} 是使用当前遍历对象中 text 字段与子组件 Input 中 value 关联到一起。

这块应该再讲细一些就好了，毕竟这个 Form.List 组件还是相对有些复杂。

Answer 1

双越 2023-05-21 08:53:26

建议可以先去找 AntDesign 相关部分的文档看看，文档里讲的非常详细。

看完有问题，可结合文档，再回复我。

• 提问者 慕粉3946981 #1

  写错了，是Form.List 组件，这个组件文档是描述的并不详细，也只能靠实际效果+ChatGPT来理解用法

• 双越 回复 提问者 慕粉3946981 #2

  ChatGPT 是一个很好的方式，我近期也在用它咨询编程问题，非常高效