ReactJS UI Diseño Ant Popconfirm Componente

Popconfirm es un diálogo de confirmación simple y compacto de una acción. Básicamente se utiliza para pedir la confirmación del usuario.

Ant Design Library tiene este componente prediseñado y también es muy fácil de integrar. Podemos usar este componente Popconfirm usando el siguiente proceso fácilmente.

Sintaxis:

<Popconfirm
   title="Open Popconfirm?"
   onConfirm={confirm}
   onCancel={cancel}
   okText="Yes"
   cancelText="No"
 >
   <a href="#">Open Popconfirm</a>
 </Popconfirm>

Popconfirm Propiedad:

• cancelButtonProps: esta propiedad se usa para los accesorios del botón cancelar
• cancelText: esta propiedad se utiliza para el texto del botón Cancelar
• deshabilitado: esta propiedad mostrará popconfirm al hacer clic en su Node secundario
• icono: Esta propiedad se utiliza para Personalizar icono de confirmación
• okButtonProps: esta propiedad se usa para accesorios de botón ok
• okText: Esta propiedad mostrará el texto del botón Confirmar
• okType: esta propiedad se utiliza para identificar el tipo de botón del botón Confirmar
• title: esta propiedad se utiliza para el título del cuadro de confirmación
• onCancel: esta propiedad es una devolución de llamada de cancelar
• onConfirm: esta propiedad es una devolución de llamada de confirmación

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app demo

• Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando.

  cd demo

• Paso 3 : después de crear la aplicación ReactJS, instale la biblioteca antd con el siguiente comando.

  npm install antd

Estructura del proyecto:

Ejemplo: ahora escriba el siguiente código en el nombre de archivo app.js.

import { Popconfirm, message } from "antd";
import "./App.css";
import "antd/dist/antd.css";
  
function App() {
  function confirm(e) {
    console.log(e);
    message.success("Click on Yes");
  }
  
  function cancel(e) {
    console.log(e);
    message.error("Click on No");
  }
  return (
    <div className="App">
      <div style={{ padding: "100px" }}>
        <h1>Demo for Popconfirm</h1>
        <Popconfirm
          title="Are you sure to delete this task?"
          onConfirm={confirm}
          onCancel={cancel}
          okText="Yes"
          cancelText="No"
        >
          <a href="#">Delete</a>
        </Popconfirm>
      </div>
    </div>
  );
}
  
export default App;

Ejecución de la aplicación: Ejecute la aplicación utilizando el siguiente comando.

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Enlace de referencia: https://ant.design/components/popconfirm/