javascript - 在表单标签中打开一个默认输入

Question

我有下一个应用程序:
https://codesandbox.io/s/uwmig?file=/index.js ,
用户可以添加任意数量的字段，并为每个生成的输入添加图像，点击添加按钮。
我想要实现的是在我的应用程序中设置一个默认的打开输入并获得如下内容:

现在通过执行以下操作打开默认部分:

  const firstRowOpen = { name: 0, key: 0, isListField: true, fieldKey: 0 };

和:

{fields.concat(firstRowOpen).map((field, index)... //here i map already concatinated fields and this is why appears first default block

代码:

 <Form.List name={[fieldKey, "inner"]}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.concat(firstRowOpen).map((field, index) =>
              !fieldsOnEdit.includes(index) ? (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Demo
                    idx={index}
                    upload={upload}
                    setUpload={setUpload}
                    field={field}
                  />

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      key="submit"
                      onClick={() => toggleSmall(index)}
                    >
                      Toggle first row
                    </Button>
                  </Form.Item>
                </Space>
              ) : (
                <Edit value={values} mode={toggleSmall} keyForm={index} />
              )
            )}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>

问题:当我单击 add 添加图像时按钮，然后点击 toggle first row 按钮，下面出现另一个按钮。
问:为什么会出现这个问题？以及如何解决这个问题？
演示: https://codesandbox.io/s/wonderful-ives-o81ue?file=/SubForm.js:767-2195

Answer 1

如果我理解正确，您需要使用 initialValues这是您的代码的更新示例
https://codesandbox.io/s/compassionate-fermi-4oedx?file=/SubForm.js

...
<Form
   name="dynamic_form_item"
   {...formItemLayoutWithOutLabel}
   onFinish={onFinish}
   initialValues={{ names: [""] }}
>
...