reactjs antd代码示例：Popconfirm气泡确认提示组件和message组件使用示例

我就是我 2024-02-17 13:37 36阅读 0赞

PopConfirm是Ant Design提供的一个气泡确认提示组件，通常用于展示一些需要用户确认的操作。下面是一个使用PopConfirm和message组件的React JS示例：

首先，确保你已经安装了Ant Design。如果还没有，可以通过npm或yarn进行安装：

npm install antd

或

yarn add antd

然后，你可以在你的React组件中使用`PopConfirm`和`message`组件。下面是一个简单的示例：

import React from 'react';
    import {
         message, Popconfirm } from 'antd';
    
    class App extends React.Component {
        
      handleClick = () => {
        
        message.error('点击了 Popconfirm');
      }
    
      render() {
        
        return (
          <Popconfirm title="确定要删除这个文件么？" onSuccess={
        this.handleClick}>
            <a href="#">点击确认</a>
          </Popconfirm>
        );
      }
    }
    
    export default App;

在这个示例中，我们首先导入了`React`、`message`和`Popconfirm`组件。然后，我们创建了一个名为`App`的React组件。在这个组件中，我们定义了一个名为`handleClick`的方法，当Popconfirm的操作成功时，这个方法会被调用。在`render`方法中，我们创建了一个`Popconfirm`组件，当点击链接时，会触发Popconfirm，如果用户点击了确定，则会调用`handleClick`方法。在Popconfirm的配置中，我们设置了`title`属性为"确定要删除这个文件么？"，`onSuccess`属性为`this.handleClick`。这样，当用户点击确定时，就会调用`handleClick`方法，并显示一条错误消息。