【Antd】Antd 如何在 Form.Item 中有 Input.Gourp 时获取 Input.Gourp 的每一个 Input 的value

【Antd】Antd 如何在 Form.Item 中有 Input.Gourp 时获取 Input.Gourp 的每一个 Input 的value
我的方法是在 Input.Gourp 中再嵌套一个 Form.Item
也就是在每个 Input.Gourp 中的 Input 外层再包裹一个 Form.Item,通过这第二个 Form.Item 的 name 属性获取 Input 的 value
在这里插入图片描述

</Form.Item>
            <Form.Item label="Y主轴取值范围">
              <Input.Group compact>
                <Form.Item name="YMainAxisRangeMin">
                  <Input
                    addonBefore=""
                    style={{ width: 100, textAlign: 'center' }}
                    placeholder="Minimum"
                  />
                </Form.Item>
                <Input
                  className="site-input-split"
                  style={{
                    width: 30,
                    borderLeft: 0,
                    borderRight: 0,
                    pointerEvents: 'none',
                  }}
                  placeholder="~"
                  disabled
                />
                <Form.Item name="YMainAxisRangeMax">
                  <Input
                    className="site-input-right"
                    style={{
                      width: 100,
                      textAlign: 'center',
                    }}
                    placeholder="Maximum"
                  />
                </Form.Item>
              </Input.Group>
            </Form.Item>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd Form.List 中,一个 Form.Item 可以通过使用 getFieldDecorator 方法来获取自身的值,而获取其他 Form.Item 的值则需要通过 Form.List 的方法进行。例如,可以通过调用 form.getFieldValue 方法来获取其他 Form.Item 的值。具体实现步骤如下: 1. 在 Form.List 中,给每个 Form.Item 一个唯一的 name 属性,例如 name={`items[${index}].name`},其中 index 为当前 Form.Item 的索引。 2. 在 getFieldDecorator 方法中,使用 getFieldValue 方法来获取其他 Form.Item 的值。示例代码如下: ```jsx {getFieldDecorator(`items[${index}].name`, { initialValue: item.name, rules: [{ required: true, message: 'Please input name' }], })( <Input placeholder="Enter name" /> )} {getFieldDecorator(`items[${index}].age`, { initialValue: item.age, rules: [{ required: true, message: 'Please input age' }], })( <InputNumber placeholder="Enter age" min={0} /> )} {getFieldDecorator(`items[${index}].email`, { initialValue: item.email, rules: [{ required: true, message: 'Please input email' }], })( <Input placeholder="Enter email" /> )} ``` 3. 在需要获取其他 Form.Item 值的地方,调用 form.getFieldValue 方法。示例代码如下: ```jsx const handleSubmit = e => { e.preventDefault(); form.validateFields((err, values) => { if (!err) { // 获取其他 Form.Item 值 const names = form.getFieldValue('items').map(item => item.name); console.log(names); // 提交表单 console.log('Received values of form: ', values); } }); }; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值