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

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

嚣张.miner

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

阅读量3k

点赞数 2

分类专栏： antd 文章标签： antd Form表单嵌套结构的Form表单

本文链接：https://blog.csdn.net/zm_miner/article/details/124212974

版权

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

摘要由CSDN通过智能技术生成

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

<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&