我正在使用Reactjs和Nextjs,我有博客列表,我可以删除任何博客,但我想在删除前显示消息,“你确定要删除此项目”?我怎么能做到这一点?这里是我目前的代码
<td> <button type="button" className='delete' onClick={() => handleRemove(todoList.id)}> Delete </button></td>
ujv3wf0j1#
我相信confirm函数就是您要寻找的。confirm暂停代码执行并打开弹出窗口。根据用户点击的选项(“OK”或“cancel”)返回true或false。一旦用户选择了一个选项,则继续执行。
confirm
function handleRemove(id){ const shouldRemove = confirm("are you sure you want to delete?") if (shouldRemove) { // Remove logic here } }
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.自己编写模态代码(不推荐)。
2条答案
按热度按时间ujv3wf0j1#
我相信
confirm
函数就是您要寻找的。confirm
暂停代码执行并打开弹出窗口。根据用户点击的选项(“OK”或“cancel”)返回true或false。
一旦用户选择了一个选项,则继续执行。
rhfm7lfc2#
您有多个选项来执行此操作。
1.使用确认:
1.使用模态确认组件,如Antd Modal或Material UI Modal或其他库。
Antd的示例:
1.自己编写模态代码(不推荐)。