向表单外部的动态表单列表添加新的表单项

Question

基于此代码片段，我想到达并触发表单外部的add属性。知道怎么做吗?

<Form form={form} initialValues={initialValues} onFinish={onSubmit}>
<Form.List>
{(fields, { add, remove }) => (
<div>
{fields.map(field => (
<Form.Item {...field}>
<Input />
</Form.Item>
))}
</div>
)}
</Form.List>
// I don't want use this button here, inside the form list. 
// I want invoke the add function from outside.
<Button type="link" onClick={() => add()}>
Add
</Button>
</Form>
// Or maybe from here
<Button type="link" onClick={() => add()}>
Add
</Button>

Answer 1

我今天也遇到了同样的问题。我所做的是将{(fields, { add, remove }) => (下的所有内容提取到外部组件中。

然后使用useImperativeHandle从它中暴露addItem方法，该方法仅从和Form.List中调用add动作

useImperativeHandle(ref, () => ({
addItem() {
actions.add()
},
}))

然后从外部组件通过ref像这样调用这个方法:

const fieldsRef = useRef<ItemsListInteface>(null)
return (
<Form.List name={name}>
{(fields, actions, { errors }) => (
<ItemsList
ref={fieldsRef}
fields={fields}
actions={actions}
errors={errors}
/>
)}
</Form.List>
<Button type="link" onClick={() => fieldsRef.current?.addItem()}>
Add
</Button>
)