next.js 如何在Reactjs中集成“确定要删除吗

qni6mghb  于 2022-12-18  发布在  React
关注(0)|答案(2)|浏览(140)

我正在使用Reactjs和Nextjs,我有博客列表,我可以删除任何博客,但我想在删除前显示消息,“你确定要删除此项目”?我怎么能做到这一点?这里是我目前的代码

<td>  <button type="button"  className='delete' onClick={() => handleRemove(todoList.id)}>
Delete
</button></td>
ujv3wf0j

ujv3wf0j1#

我相信confirm函数就是您要寻找的。
confirm暂停代码执行并打开弹出窗口。
根据用户点击的选项(“OK”或“cancel”)返回true或false。
一旦用户选择了一个选项,则继续执行。

function handleRemove(id){
    const shouldRemove = confirm("are you sure you want to delete?")

    if (shouldRemove) {
        // Remove logic here
    }
}
rhfm7lfc

rhfm7lfc2#

您有多个选项来执行此操作。
1.使用确认

function handleRemove(id){
    const isConfirmed = confirm("re you sure you want to delete this item ?")
    if (isConfirmed) {
        // Rest of your code
    }
}

1.使用模态确认组件,如Antd Modal或Material UI Modal或其他库。
Antd的示例:

import React from 'react';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal, Space } from 'antd';

const { confirm } = Modal;

const showConfirm = () => {
  confirm({
    title: 'Are you sure you want to delete this item ?',
    icon: <ExclamationCircleFilled />,
    content: 'Some descriptions',
    onOk() {
      // Your Delete Logic
    },
    onCancel() {
      // Do nothing
    },
  });
};

const ConfirmModal = () => (
  <Space wrap>
    <Button onClick={showConfirm}>Confirm</Button>
  </Space>
);

export default ConfirmModal;

1.自己编写模态代码(不推荐)。

相关问题