Componente de transferencia de diseño Ant de ReactJS UI

. El componente de transferencia se usa para el dPodemos usar el siguiente enfoque en ReactJS para usar el componente de transferencia de diseño Ant.

Accesorios de transferencia:

• dataSource: se utiliza para configurar los datos de origen.
• disabled: Se utiliza para indicar si deshabilitar o no la transferencia.
• filterOption: es una función para verificar si un elemento debe mostrarse en la lista de resultados de búsqueda o no.
• pie de página: Es una función que se utiliza para representar el pie de página.
• listStyle: se utiliza para pasar un estilo CSS personalizado utilizado para representar las columnas de transferencia.
• configuración regional: se utiliza para indicar el texto i18n , incluido el filtro, el texto vacío, la unidad de artículo, etc.
• oneWay: se utiliza para mostrar como estilo de dirección única.
• operaciones: Se utiliza para denotar un conjunto de operaciones que se ordenan de arriba a abajo.
• OperationStyle: se utiliza para pasar un estilo CSS personalizado utilizado para representar la columna de operaciones.
• paginación: Se utiliza para la paginación.
• render: Es una función para generar el elemento que se muestra en una columna.
• selectAllLabels: se utiliza para indicar un conjunto de etiquetas personalizadas para seleccionar todas las casillas de verificación en el encabezado.
• teclas seleccionadas: se utiliza para indicar un conjunto de claves de elementos seleccionados.
• showSearch: Se utiliza para indicar si mostrar o no un cuadro de búsqueda en cada columna.
• showSelectAll: se utiliza para mostrar seleccionar todas las casillas de verificación en el encabezado.
• targetKeys: se utiliza para indicar un conjunto de claves de elementos que se enumeran en la columna de la derecha.
• títulos: Se utiliza para denotar un conjunto de títulos que se ordenan de izquierda a derecha.
• onChange: es una función de devolución de llamada que se activa cuando se completa la transferencia entre columnas.
• onScroll: es una función de devolución de llamada que se activa cuando se desplaza la lista de opciones.
• onSearch: es una función de devolución de llamada que se activa cuando se cambian los campos de búsqueda.
• onSelectChange: es una función de devolución de llamada que se activa cuando se cambian los elementos seleccionados.

Accesorios de renderizado:

• dirección: Se utiliza para indicar la dirección de renderizado de la lista.
• disabled: Se utiliza para indicar si deshabilitar o no la lista.
• filteredItems: se utiliza para indicar los elementos filtrados.
• teclas seleccionadas: se utiliza para indicar los elementos seleccionados.
• onItemSelect: se utiliza para indicar el elemento seleccionado.
• onItemSelectAll: Se utiliza para seleccionar
  un grupo de elementos.

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 foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from 'react';
import "antd/dist/antd.css";
import { Transfer } from 'antd';
  
// Our sample Mock Data
const mockData = [
  {key: "0", title: "Title 0", description: "Sample Description 0"}, 
  {key: "1", title: "Title 1", description: "Sample Description 1"},
  {key: "2", title: "Title 2", description: "Sample Description 2"},
  {key: "3", title: "Title 3", description: "Sample Description 3"},
  {key: "4", title: "Title 4", description: "Sample Description 4"},
  {key: "5", title: "Title 5", description: "Sample Description 5"},
];
  
export default function App() {
  
  // To set target keys
  const [targetKeys, setTargetKeys] = useState(mockData);
    
  // Contains the selected keys
  const [selectedKeys, setSelectedKeys] = useState([]);
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Transfer Component</h4>
      <Transfer
        dataSource={mockData}
        titles={['Source', 'Target']}
        render={item => item.title}
        selectedKeys={selectedKeys}
        targetKeys={targetKeys}
        onChange={(nextTargetKeys) => {
          setTargetKeys(nextTargetKeys);
        }}
        onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
          setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
        }}
      />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

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

Referencia: https://ant.design/components/transfer/