ant-design / ant-design/pro-components

🐛[BUG] ProFormList 使用自定义ref FormListActionType 没办法触发 onAfterAdd onAfterRemove beforeRemoveRow

Open
#8,939 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

如同标题,使用自定义的ref没办法触发onAfterAdd和onAfterRemove, 和 beforeRemoveRow

### 📷 复现步骤
```
const llmListRef = useRef>();

{
console.log('onAfterAdd')
}}
onAfterRemove={()=> {
console.log('onAfterRemove')
}}
actionGuard={{
beforeAddRow: async () => {
console.log('beforeAddRow')
return true
},
beforeRemoveRow: async () => {
console.log('beforeRemoveRow')
return true
}
}}
itemRender={({listDom}, listMeta) =>

}
onClick={() => {
const copied = llmListRef.current?.get(listMeta.index);
const duplicated: Partial = {
id: randomUUID(),
llm_pn: copied!.llm_pn,
llm_desc: copied!.llm_desc,
unit_cost: copied!.unit_cost,
llm_qty: copied!.llm_qty,
}
llmListRef.current?.add(duplicated, listMeta.index + 1)
}}
/>
}
onClick={() => {
llmListRef.current?.remove(listMeta.index)
}}
/>
}
style={{marginBlockEnd: 8}}
size={'small'}
>
{listDom}

}
creatorRecord={{
id: randomUUID(),
[LLMCostDetailProps.unit_cost]: 0,
[LLMCostDetailProps.llm_qty]: 1,
}}
>
```

### 🏞 期望结果

希望可以正常触发 onAfterAdd onAfterRemove beforeRemoveRow

### © 版本信息

"@ant-design/pro-components": "^2.8.2",
"antd": "^5.22.3",

Contributor guide

Open the contributing guide

Research direction

Start at the ProFormList actionRef API and reproduce the example with a custom FormListActionType ref. Trace the add and remove entry points and verify that onAfterAdd, onAfterRemove, and beforeRemoveRow fire when those operations are invoked through the ref.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.