IT技术 - 使用 reactjs 将数据保存在表单中 - 吾爱随笔录

form当用户每次单击add field按钮时都可以添加新输入时，我有一个标签。输入附近也会出现edit按钮。单击edit按钮，输入应该消失，而不是它们应该出现edit文本。
问题add fields：当我在按钮上单击 2 次，然后单击edit表单中的一个按钮时，两个表单都会消失，而不是edit文本出现 2，对于这两个表单。
问题：如何解决上述问题，当我单击一个编辑按钮时，只有该部分应变为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