在 reactjs 的表单中保存值 [英] Save values in a form in reactjs

问题描述

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

 <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off"><Form.List name="users">{(字段，{添加，删除})=>{返回 (<div>{fields.map((field, index) =>!fieldsOnEdit.includes(index) ?(<空格键={field.key}style={{ display: "flex", marginBottom: 8 }}对齐=开始"><Form.Item{...场地}name={[field.name, "first"]}fieldKey={[field.fieldKey, 第一个"]}规则={[{ 要求:true，消息:缺少名字"}]}><输入占位符="名字"/></Form.Item><表单.项目><Button type="primary" htmlType="submit">提交{setFieldOnEdit(index)}</按钮></Form.Item></空间>) : (<编辑值={formVal} keyForm={index}/>))}<表单.项目><按钮类型=虚线"onClick={() =>{添加();}}堵塞><PlusOutlined/>添加字段</按钮></Form.Item>

);}}</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

解决方案

该值不会被覆盖，您始终呈现相同的项目.您在 Edit 组件的 keyFrom 道具中有想要的项目的索引，只需使用它:

export const Edit = ({ value, keyForm }) =>{返回 (<div>编辑模式<p>值:{value.users[keyForm].first}</p>

);};

I have an application where user can submit data using a form. I'm using dynamic form where user can set how many forms he wants.

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

When i click on submit button appears <Edit value={formVal} keyForm={index} /> component where should appears corresponding value from the form. Now there is an issue: when i save for example 2 forms, the second value overrides previous and so on. I made this: value.users[value.users.length - 1].first, trying to set for every form corresponding value but it does not work.
Question: How to solve the issue, and when i will save a form to display the corresponding value in component?
demo: https://codesandbox.io/s/modest-austin-kqztw?file=/index.js:698-2310

解决方案

The value is not overwritten, you are rendering always the same item. You have the index of wanted item in keyFrom prop in your Edit component, just use it:

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

这篇关于在 reactjs 的表单中保存值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！