动态表单列表中的问题与崩溃

Question

我坚持执行动态表单提交。这是我的 code.

我正在从后端接收数据

    const dataFromBackend = [
      { id: 2, start: "2022-01-04T08:00:00.000Z", money: "500" },
      { id: 3, start: "2022-02-04T08:00:00.000Z", money: "1500" }
    ];

并试图在 Collapse 中向用户显示该数据，并且在折叠中有 2 种形式（第一种用于日期，第二种用于金钱）用户可以编辑。

我还有 add 按钮，允许用户添加空输入的新折叠（第一个用于日期，第二个用于金钱）。

毕竟用户可以添加 he/she 想要的折叠并将所有数据发送到后端。

这里是最终结果的photo。 P.S。图片中的表格计数有点不同，请不要担心 ;)

我尝试按照 antd docs:

中的方式实现

    const BasicInformation = () => {
     const { Panel } = Collapse;

      const onSubmit = (data) => {
        console.log(data);
      };

      const dataFromBackend = [
        { id: 2, start: "2022-01-04T08:00:00.000Z", money: "500" },
        { id: 3, start: "2022-02-04T08:00:00.000Z", money: "1500" }
      ];
      return (
        <Form onFinish={(e) => onSubmit(e)}>
         <Form.List name="values">
           {(fields, { add }) => {
             return (
                <>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    block
                  >
                    Add
                  </Button>
                  <Collapse
                    accordion
                    style={{
                      background: "rgba(25, 103, 210, 0.08)",
                      border: "none"
                    }}
                  >
                    {dataFromBackend.map((data, idx) => (
                      <Panel
                        style={{ border: "none" }}
                        header={data.money}
                        key={`${data.id}`}
                      >
                       <div>
                         {fields.map((field) => (
                          <>
                             <Form.Item
                            {...field}
                            name={[field.name, "start"]}
                            label="Start"
                            fieldKey={[field.fieldKey, "start"]}
                          >
                            <DatePicker />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            name={[field.name, "money"]}
                            label="Money"
                            fieldKey={[field.fieldKey, "money"]}
                          >
                            <Input />
                          </Form.Item>
                        </>
                      ))}
                    </div>
                  </Panel>
                ))}
              </Collapse>
            </>
          );
        }}
        </Form.List>

        <Button type="primary" htmlType="submit">
          send
         </Button>
        </Form>
      );
   };

但它无法正常工作，当我单击 add 按钮时，表格正在折叠中添加，但我需要使用这两个表格添加新的折叠。

请帮我解决这个问题。

谢谢。

Answer 1

您需要在字段的每次迭代中创建一个新的 Collapse 组件，还需要将 dataFromBacked 中的 start 属性转换为 moment 对象，因为antd 的 DatePicker 以 moment 对象作为值。像这样：

{fields.map((field, i) => (
    <Collapse
      key={i}
      accordion>
      <Panel ...>
        <Form.Item
          name={[field.name, 'start']}
          label="Start"
          fieldKey={[field.fieldKey, 'start']}>
            <DatePicker />
        </Form.Item>
        <Form.Item
          name={[field.name, 'money']}
          label="Money"
          fieldKey={[field.fieldKey, 'money']}>
            <Input />
        </Form.Item>
      </Panel>
    </Collapse>
))}

顺便说一句，为了使用 dataFromBackend 初始化您的列表，您可以将其用作 Form.List 组件的 initialValue 属性。我已经实现了一个例子 Here on stackblitz 你可以看看。

动态表单列表中的问题与崩溃

issue in dynamic Form List with collapse

javascript

reactjs

forms

antd

ant-design-pro