首页 > 解决方案 > 无法以antd输入形式获取输入组内一个输入文本的输入值

问题描述

在 antd 表单中,我有一个输入组,它有两个输入文本字段,并且有一个添加按钮来动态添加字段和删除字段。在提交时,我只收到输入文本的一个输入值。

您可以在以下链接中找到代码

 //  https://codesandbox.io/s/hopeful-kilby-tkzfh
    const keys = getFieldValue("keys");
    const formItems = keys.map((k, index) => (
      <Form.Item
        {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
        label={index === 0 ? "Passengers" : ""}
        required={false}
        key={k}
      >
        {getFieldDecorator(`passenger${k}`, {
          validateTrigger: ["onChange", "onBlur"],
          rules: [
            {
              required: true,
              whitespace: true,
              message: "Please input passenger's name or delete this field."
            }
          ]
        })(
          <InputGroup>
            <Input
              style={{ width: 100, textAlign: "center" }}
              placeholder="Minimum"
            />
            <Input
              style={{
                width: 30,
                borderLeft: 0,
                pointerEvents: "none",
                backgroundColor: "#fff"
              }}
              placeholder="~"
              disabled
            />
            <Input
              style={{ width: 100, textAlign: "center", borderLeft: 0 }}
              placeholder="Maximum"
            />
          </InputGroup>
        )}
        {keys.length > 1 ? (
          <Icon
            className="dynamic-delete-button"
            type="minus-circle-o"
            onClick={() => this.remove(k)}
          />
        ) : null}
      </Form.Item>```

I need to get both the values of the input texts in the input group.

标签: reactjsantdrc-form

解决方案


推荐阅读