ReactJS 语义 UI 确认插件

Semantic UI 是一个现代框架，用于为网站开发无缝设计，它为用户提供了轻量级的组件体验。它使用预定义的 CSS、JQuery 语言来合并到不同的框架中。

在本文中，我们将了解如何在 ReactJS 语义 UI 中使用 Confirm Addons 确认 Addons 用于确认或取消用户执行的操作。

特性：

回调： Confirm 具有取消和确认操作的回调。

变化：

Header：我们可以在confirm中定义一个header。
内容：我们可以在confirm中定义内容。
按钮文本：我们可以使用确认更改按钮文本。
确认尺寸：我们可以使用确认来定义尺寸

句法：

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```
第 3 步：在给定目录中安装语义 UI。
```
npm install semantic-ui-react semantic-ui-css
```

项目结构：它将如下所示。

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

示例 1：在此示例中，我们使用 ReactJS 语义 UI 确认插件显示确认插件中的标题和内容变化。

App.js

import React, {Component}from 'react'
import { Button, Confirm } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  


  
export default class gfg extends Component {
  state = { gfg1: false }
  
  gfg1 = () => this.setState({ gfg1: true })
  close = () => this.setState({ gfg1: false })
  
  render() {
    return (
      
        
        
      
    )
  }
}

App.js

import React, {Component}from 'react'
import { Button, Confirm } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  


  
export default class gfg extends Component {
  state = { gfg1: false }
  
  gfg1 = () => this.setState({ gfg1: true })
  close = () => this.setState({ gfg1: false })
  
  render() {
    return (
      
        
        
  
      
    )
  }
}

输出：

示例 2：在此示例中，我们使用 ReactJS 语义 UI 确认插件在确认插件中显示按钮文本变体。

应用程序.js

import React, {Component}from 'react'
import { Button, Confirm } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  


  
export default class gfg extends Component {
  state = { gfg1: false }
  
  gfg1 = () => this.setState({ gfg1: true })
  close = () => this.setState({ gfg1: false })
  
  render() {
    return (
      
        
        
  
      
    )
  }
}

输出：

参考： https://react.semantic-ui.com/modules/transition