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>
  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 组件 childrenForm.Item 组件 name={[name, "text"]} 是使用当前遍历对象中 text 字段与子组件 Inputvalue 关联到一起。

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

写回答

1回答

双越

2023-05-21

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

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

0
2
双越
回复
慕粉3946981
ChatGPT 是一个很好的方式,我近期也在用它咨询编程问题,非常高效
2023-05-22
共2条回复

React18+ Nest.js 全栈开发仿问卷星项目

React18+TS4+Antd5+Next.js13 ,B端+C 端,完整业务

383 学习 · 252 问题

查看课程