Form 表单内有多个元素的使用方式

最新推荐文章于 2024-09-19 11:29:15 发布

原创最新推荐文章于 2024-09-19 11:29:15 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#antd #Form表单 #嵌套结构的Form表单

antd 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Ant Design的Form表单中，当表单内有多个元素如输入框及描述文案等复杂结构时，如何正确处理元素和获取表单数据的方法。特别强调了当Form.Item的直接子元素不是标准输入组件时，使用getFieldDecorator进行字段装饰的重要性。

产品中常有的一个需求
输入框后面有描述文案或其他组件
在这里插入图片描述
我们可能这样写

<Form.Item
  name="firstName"
  label="姓名"
  rules={[{ required: true, message: '请输入姓名!' }]}
>
    <Row gutter={8}>
      <Col span={12}>
        <Input defaultValue={detail?.firstName} />
      </Col>
      <Col span={8}>
        <Button
          type="default"
          onClick={() => {
            setEditParam((pre) => ({ ...pre, firstName: false }));
          }}
        >
          取消
        </Button>
        &nbsp;&nbsp;
        <Button
          type="primary"
          onClick={() => {
            onSubmit('firstName');
          }}
        >
          确定
        </Button>
      </Col>
    </Row>
</Form.Item>

Form.Item里面的直接子元素不是Input, Select这些, 那么这个时候使用form.getFieldsValue()获取表单内的数据是获取不到的

获取value值你可能需要在表单自身添加一些方法

参考antd Form表单

演示 Form.Item 内有多个元素的使用方式。<Form.Item name="field" /> 只会对它的直接子元素绑定表单功能，例如直接包裹了 Input/Select。如果控件前后还有一些文案或样式装点，或者一个表单项内有多个控件，你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局，或者添加 noStyle 作为纯粹的无样式绑定组件（类似 3.x 中的 getFieldDecorator）。

- <Form.Item label="Field" name="field">
-   <Input />
- </Form.Item>
+ <Form.Item label="Field">
+   <Form.Item name="field" noStyle><Input /></Form.Item> // 直接包裹才会绑定表单
+   <span>description</span>
+ </Form.Item>

修改code

 <Form.Item label="性别">
     <Space>
       <Form.Item name="gender" noStyle>
         <Select>
           <Select.Option value={1} label="男">
             男
           </Select.Option>
           <Select.Option value={2} label="女">
             女
           </Select.Option>
         </Select>
       </Form.Item>
       <Button
         type="default"
         onClick={() => {
           setEditParam({ ...editParams, gender: false });
         }}
       >
         取消
       </Button>
       <Button
         type="primary"
         onClick={() => {
           onSubmit('gender');
         }}
       >
         确定
       </Button>
     </Space>
</Form.Item>

这个时候使用form.getFieldsValue()就会生效!