时间戳

首页 > 解决方案 > 单击单个按钮时显示多个 Popconfirm 按钮

reactjs - 单击单个按钮时显示多个 Popconfirm 按钮

问题描述

我使用 ant design table 组件创建了一个表格，其中最后一列包含用于编辑和删除表格行项的按钮。每当有人试图删除一行时，我都会从 antd 添加一个 popconfirm 组件。但是给我带来麻烦的是，每当我尝试通过单击删除按钮来删除一行时，其他行的所有 popconfirms 也会显示出来。单击特定行的删除按钮可多次弹出确认。

我的按钮项的代码是这样的：

{
            title: 'Actions',
            dataIndex: 'actions',
            key: 'actions',
            render: (_, record) => {

                // console.log("Record", record.id)

                const onEdit = () => {
                    console.log("Record", record.id)
                    setRecordId(record.id);

                    // console.log("Record on edit button", record)
                    setIsModalVisible(true)
                    setAddRecordData(record)
                    setTitle("Edit")

                }


                const onDelete = () => {
                    setVisible(true)
                    console.log("Record on delete button", record)
                }

                const handleOk = async () => {
                    const id = record.id;
                    const response = await props.callExpertiseApiDel(id)
                    console.log("delete response:", response)

                    if (response.status === 200) {
                        setVisible(false)
                        async function fetchData() {
                            await props.callExpertiseApi();
                        }
                        fetchData();
                    }
                };

                const handleCancel = () => {
                    console.log('Clicked cancel button', record.id);
                    setVisible(false);
                    setAddRecordData({})
                }

                return <div style={{ display: 'flex' }}>
                    <Icondescription icon={<EditOutlined />} label='Edit'
                        className='action-edit-icon' btnClick={onEdit} />

                    <Popconfirm
                        title="Are you sure to delete this item?"
                        visible={visible}
                        onConfirm={handleOk}
                        onCancel={handleCancel}
                    >
                        <Icondescription icon={<DeleteOutlined />} btnClick={onDelete} />
                    </Popconfirm>

                </div>
            }

如何在单击删除键时摆脱这个多重 popconfirm？

标签： reactjsantd

解决方案

这是因为visible每一行都有一个状态。您可以将渲染移动到单独的组件并在组件内部使用本地状态。或者您可以保留您的渲染功能，但将所有可见标志存储在您的状态中，如下所示：

const [visible, setVisible] = useState({})

// then where you want to set

setVisible((prevVisible) => ({
  ...prevVisible,
  [record.id]: true
}))

推荐阅读