ReactJS 语义 UI 确认插件

本插件是基于ReactJS的语义UI框架实现的一个弹窗确认插件，可以方便地在项目中使用。以下是本插件的一些特点和使用方法：

特点

• 使用简单，无需手动编写弹窗代码
• 支持自定义弹窗标题、内容和确认文本
• 可以添加自定义的确认按钮回调函数

使用方法

1. 安装本插件

   npm install semantic-ui-react-confirm
   

2. 引入本插件

   import Confirm from 'semantic-ui-react-confirm';
   

3. 在需要用到确认弹窗的地方引入Confirm组件并使用

   <Confirm
     title='确认删除？'
     content='删除后将无法恢复！'
     confirmText='删除'
     onConfirm={() => console.log('删除成功！')}
   />
   

   上面的代码将会渲染一个确认弹窗，包括一个标题“确认删除？”，一段内容“删除后将无法恢复！”，一个确认按钮“删除”，以及默认的取消按钮。如果点击确认按钮，则会执行相应的回调函数。

4. 可选props

   Confirm组件支持以下可选的props：

   • title: 弹窗的标题，默认为“确认”
   • content: 弹窗的内容，默认为空字符串
   • confirmText: 确认按钮的文本，默认为“确认”
   • cancelText: 取消按钮的文本，默认为“取消”
   • onConfirm: 确认按钮的回调函数，默认为空函数
   • onCancel: 取消按钮的回调函数，默认为空函数

代码示例

import React from 'react';
import { Button } from 'semantic-ui-react';
import Confirm from 'semantic-ui-react-confirm';

function Example() {
  const handleDelete = () => console.log('删除成功！');
  const handleCancel = () => console.log('已取消删除');
  
  return (
      <>
        <Button onClick={() =>
            <Confirm
              title='确认删除？'
              content='删除后将无法恢复！'
              confirmText='删除'
              onConfirm={handleDelete}
              onCancel={handleCancel}
            />
          }>
            点我删除
        </Button>
      </>
  )
}

这个代码示例中，我们创建了一个Button按钮，并将一个包裹了Confirm组件的回调函数传递给它的onClick属性，从而实现了在点击按钮时弹出确认弹窗的效果。