时间戳

首页 > 解决方案 > 在 reactjs 中将值保存在表单中

reactjs - 在 reactjs 中将值保存在表单中

问题描述

我有一个应用程序，用户可以使用表单提交数据。我正在使用动态表单，用户可以在其中设置他想要的表单数量。

 <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) =>
                !fieldsOnEdit.includes(index) ? (
                  <Space
                    key={field.key}
                    style={{ display: "flex", marginBottom: 8 }}
                    align="start"
                  >
                    <Form.Item
                      {...field}
                      name={[field.name, "first"]}
                      fieldKey={[field.fieldKey, "first"]}
                      rules={[
                        { required: true, message: "Missing first name" }
                      ]}
                    >
                      <Input placeholder="First Name" />
                    </Form.Item>
                    <Form.Item>
                      <Button type="primary" htmlType="submit">
                        Submit{setFieldOnEdit(index)}
                      </Button>
                    </Form.Item>
                  </Space>
                ) : (
                  <Edit value={formVal} keyForm={index} />
                )
              )}

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

当我单击提交按钮时，会出现<Edit value={formVal} keyForm={index} />组件，其中应该出现表单中的相应值。现在有一个问题：当我保存例如 2 个表单时，第二个值会覆盖以前的值，依此类推。我做了这个：value.users[value.users.length - 1].first，试图为每个表单设置相应的值，但它不起作用。
问题：如何解决这个问题，我什么时候会保存一个表单以在组件中显示相应的值？
演示：https ://codesandbox.io/s/modest-austin-kqztw?file=/index.js:698-2310

标签： reactjs

解决方案

该值不会被覆盖，您始终呈现相同的项目。keyFrom您在组件的prop 中有所需项目的索引Edit，只需使用它：

export const Edit = ({ value, keyForm }) => {
  return (
    <div>
      edit mode
      <p>value: {value.users[keyForm].first}</p>
    </div>
  );
};

推荐阅读