项目牵扯到一个表单的动态增减,以及提交之后将表单隐藏的问题:
点击确认添加后,需要将表单清空,并将表单删除,否则,再次点击确认添加按钮时,会导致重复添加;
刚开始的思路时,直接操作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方法;