javascript - 使用reactjs将数据保存为表单

当用户每次单击form按钮时可以添加新输入时，我就有了add field标记。还在输入附近出现edit按钮。单击edit按钮，输入应消失，而不是显示edit文本。
问题:当我在add fields按钮上单击2次，然后单击表单中的edit按钮之一时，两种形式都消失了，而不是在edit上出现了两种形式的文本。

问题:如何解决上述问题，当我单击编辑按钮之一时，该部分应变为edit文本，但其余部分仍应作为输入？

const Demo = () => {
  const [editF, setEdit] = useState(false);
  const onFinish = values => {
    console.log("Received values of form:", values);
    setEdit(true);
  };
  const edit = () => {
    setEdit(true);
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field =>
                editF === false ? (
                  <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
                      {...field}
                      name={[field.name, "last"]}
                      fieldKey={[field.fieldKey, "last"]}
                      rules={[{ required: true, message: "Missing last name" }]}
                    >
                      <Input placeholder="Last Name" />
                    </Form.Item>

                    <button onClick={edit}>edit</button>
                  </Space>
                ) : (
                  "edit"
                )
              )}

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

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>

演示:https://codesandbox.io/s/priceless-monad-kzjbe?file=/index.js:719-739

最佳答案

您的代码具有一个称为editF的状态变量，并且自从您声明代码以来，每个变量都依赖于它:editF === false ? (....):edit因此，一旦editF为false，所有字段都会消失。
尝试使每个字段的 bool(boolean) 类型变量为列表，然后将其映射到您拥有的字段数及其编辑/不编辑状态。

关于javascript - 使用reactjs将数据保存为表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62691684/