在表单标签中打开默认输入 [英] Open a default input in form tag

问题描述

我有下一个申请:

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

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

和:

{fields.concat(firstRowOpen).map((field, index)...//这里我映射已经连接的字段，这是为什么会出现第一个默认块

代码:

 {(字段，{添加，删除})=>{返回 (<div>{fields.concat(firstRowOpen).map((field, index) =>!fieldsOnEdit.includes(index) ?(<空格键={field.key}style={{ display: "flex", marginBottom: 8 }}对齐=开始"><演示idx={索引}上传={上传}设置上传={设置上传}字段={字段}/><表单.项目><按钮类型=主要"htmlType="提交"键=提交"onClick={() =>切换小(索引)}>切换第一行</按钮></Form.Item></空间>) : (<Edit value={values} mode={toggleSmall} keyForm={index}/>))}<表单.项目><按钮类型=虚线"onClick={() =>{添加();}}堵塞><PlusOutlined/>将字段添加到内部</按钮></Form.Item>

);}}</Form.List>

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

解决方案

如果我理解正确你需要使用 initialValues

这是您的代码的更新示例https://codesandbox.io/s/compassionate-fermi-4oedx?file=/SubForm.js

<代码>...<表格name="dynamic_form_item";{...formItemLayoutWithOutLabel}onFinish={onFinish}初始值={{名称:["]}}>...

I have the next application: https://codesandbox.io/s/uwmig?file=/index.js,
There users can add as many fields as they want and add images for each generated input, clicking on add button.
What I want to achieve is to set a default open input in my application and to get something like this:

Now the default section is open by doing:

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

and:

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

Code:

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

Issue: when I add an image clicking on add button, and after that click on toggle first row button, appears another buttons bellow.
Question: Why this issue appears? and how to solve the issue?
demo: https://codesandbox.io/s/wonderful-ives-o81ue?file=/SubForm.js:767-2195

解决方案

If I understand right you need to use initialValues

Here is an updated example of your code https://codesandbox.io/s/compassionate-fermi-4oedx?file=/SubForm.js

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

这篇关于在表单标签中打开默认输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！