pro-components
pro-components copied to clipboard
🐛[BUG] ProFormList 自定义删除不起作用
🐛 bug 描述
ModalForm -> ProFormList 使用 actionRender 自定义删除按钮,action.remove(props.key) 删除的是 index 而非 key,写法参照 https://zhuanlan.zhihu.com/p/352954919 自定义操作按钮
/** 完全自定义 */
<ProFormList
actionRender={(props, action) => {
return [
<Button
key='delete'
onClick={() => {
action.remove(props.key)
}}>
删除
</Button>,
]
}}
name='users'
label='用户信息'
/>
📷 复现步骤
注意,只有使用 action.remove(0)
能删除
🏞 期望结果
自定义删除按钮,点击删除后可以清除当前行
💻 复现代码
const [form] = ProForm.useForm()
<ModalForm
visible={visible}
form={form}
title={`${title}尖货聚焦配置`}
size="small"
layout="horizontal"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
<ProFormList
actionRender={(props, action, defaultActionDom) => {
return [
<Button
key={`delete${props.key}`}
type="primary"
danger
className={styles.contentDelete}
onClick={() => {
console.log(props)
console.log('key', props.key)
// action.remove(0) 可生效
action.remove(props.key)
}}
>
删除
</Button>,
...defaultActionDom,
]
}}
name="contentInfoList"
copyIconProps={false}
creatorButtonProps={{
position: 'top',
type: 'primary',
size: 'large',
creatorButtonText: '添加',
icon: null,
onClick: () => {
const list = actionRef.current?.getList()
console.log('list', list)
actionRef.current?.add({
name: '新增' + list?.length,
})
},
}}
>
<Space align="baseline" className={styles.contentWrapper} key="useMode">
<ProFormText label="内容" placeholder="请输入" rules={[{ required: true }]} />
<ProFormText label="ID" placeholder="请输入" rules={[{ required: true }]} />
</Space>
</ProFormList>
</ModalForm>
© 版本信息
ProComponents 版本:
"@ant-design/pro-form": "1.74.4",
umi版本: 4.0.13
浏览器环境: chrome 105.0.5195.102
开发环境: mac OS
以下的 Issues 可能会帮助到你 / The following issues may help you
- [#5934][🐛[BUG] ProFormList 自定义删除不起作用][100%]
+1
先使用action.remove(props.name)吧