Ant Design <Input.Group>组件表单数据无法保存问题求助

你在Ant Design 4.3.4中实现的尺寸、重量字段无法获取数据，核心原因是错误地将多个输入控件放在单个Form.Item中，并直接给子控件加name——AntD 4.x的Form组件只会识别Form.Item上绑定的name，子控件的name不会被Form的字段收集逻辑处理，而Input.Group本身没有可供Form绑定的统一值属性，导致点击提交时无法获取这些字段的数据。

解决方案一：嵌套字段名+独立Form.Item（推荐） #

给每个子输入/选择控件单独嵌套Form.Item，使用嵌套字段名（数组格式）来关联父字段，这样Form会自动将这些子字段的值整合为对象，提交时就能完整获取。

修正后的完整代码示例：

<Form onFinish={handleSubmit}>
  <Row style={{ justifyContent: 'left' }}>
    <Col span={8}>
      <div className="p-2 lbh-input">
        <Form.Item label="Dimensions &nbsp;&nbsp; (l x b x h)">
          <Input.Group>
            {/* 尺寸的长/宽/高/单位分别绑定嵌套字段 */}
            <Form.Item name={['dimensions', 'length']} noStyle>
              <Input style={{ width: '15%' }} type="number" />
            </Form.Item>
            <Form.Item name={['dimensions', 'breadth']} noStyle>
              <Input style={{ width: '24%' }} addonBefore="x" type="number" />
            </Form.Item>
            <Form.Item name={['dimensions', 'height']} noStyle>
              <Input style={{ width: '25%' }} addonBefore="x" type="number" />
            </Form.Item>
            <Form.Item name={['dimensions', 'unit']} noStyle>
              <Select defaultValue="cm">
                <Option value="mm">mm</Option>
                <Option value="cm">cm</Option>
                <Option value="inch">inch</Option>
                <Option value="feet">feet</Option>
                <Option value="m">m</Option>
              </Select>
            </Form.Item>
          </Input.Group>
        </Form.Item>
      </div>
    </Col>
    <div className="p-2">
      <Form.Item label="Weight">
        <Input.Group>
          {/* 重量值和单位绑定嵌套字段 */}
          <Form.Item name={['weight', 'value']} noStyle>
            <Input style={{ width: '50%' }} type="number" className='noborderradius' />
          </Form.Item>
          <Form.Item name={['weight', 'unit']} noStyle>
            <Select defaultValue="kg">
              <Option value="kg">kg</Option>
              <Option value="tonne">tonne</Option>
              <Option value="g">g</Option>
            </Select>
          </Form.Item>
        </Input.Group>
      </Form.Item>
    </div>
  </Row>
  <Form.Item>
    <Button type="primary" htmlType="submit">SUBMIT</Button>
  </Form.Item>
</Form>

提交后，handleSubmit中的data会包含：

{
  dimensions: {
    length: 10, // 用户输入的长度
    breadth: 20, // 用户输入的宽度
    height: 30, // 用户输入的高度
    unit: "cm" // 用户选择的单位
  },
  weight: {
    value: 5, // 用户输入的重量
    unit: "kg" // 用户选择的单位
  }
}

关键注意点 #

1. 使用noStyle属性给子Form.Item去掉默认样式，避免布局错乱；
2. 嵌套字段名用数组格式['父字段名', '子字段名']，Form会自动整合为对象；
3. 提交按钮建议用AntD的Button组件并设置htmlType="submit"，符合Form的默认提交逻辑（原生button也可以，但统一用组件更规范）。

内容的提问来源于stack exchange，提问作者Rohit Kumar