pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG] ProFormList 自定义删除不起作用

Open soapwong opened this issue 2 years ago • 3 comments

🐛 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

soapwong avatar Sep 15 '22 03:09 soapwong

以下的 Issues 可能会帮助到你 / The following issues may help you

  • [#5934][🐛[BUG] ProFormList 自定义删除不起作用][100%]

github-actions[bot] avatar Sep 15 '22 03:09 github-actions[bot]

+1

laochake avatar Sep 21 '22 08:09 laochake

先使用action.remove(props.name)吧

Zeng-J avatar Sep 23 '22 07:09 Zeng-J