antd里面的动态增减表单,手动触发删除；useref的使用

项目牵扯到一个表单的动态增减,以及提交之后将表单隐藏的问题:

点击确认添加后,需要将表单清空,并将表单删除,否则,再次点击确认添加按钮时,会导致重复添加;
刚开始的思路时,直接操作dom将表单隐藏,后来发现,点击按钮时还会添加,究其原因发现是表单内容没有清空;接着尝试多种方法后发现都无法清空表单;
这是antd组件的代码:

  <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <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>
                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}

现在只能尝试调用里面的remove方法进行手动删除了;
首先定义一个数组用来存储函数:

    const fnList = useRef<Function[]>([])

接着,每次调用逻辑新增出表单的时候,都将remove方法存入上面定义的数组中;
最后,点击确认添加按钮后,将数组进行遍历;这样就手动的调用了每一个表单的remove方法

      fnList.current.forEach(f => { f() })

相当于点击确认添加后,挨个点了后面的删除按钮

这样就成功的解决了问题;

思路总结: 点击新增当事人的同时,将本项的remove方法存入已定义的数组中;提交之后调用remove方法;
用到了非受控组件useref方法;