Componente en cascada ReactJS UI Ant Design

. Cascader Component se utiliza como c. Este componente se usa cuando el usuario establece Podemos usar el siguiente enfoque en ReactJS para usar el componente Ant Design Cascader.

Accesorios de cascada:

• allowClear: Se utiliza para indicar si se permite borrar o no.
• autoFocus: se utiliza para obtener el enfoque cuando se monta el componente si se establece en verdadero.
• bordered: Se utiliza para indicar si tiene estilo de borde o no.
• changeOnSelect: se utiliza para cambiar el valor de cada selección si se establece en verdadero.
• className: Se utiliza para la clase CSS adicional.
• defaultValue: Se utiliza para denotar el valor seleccionado inicialmente.
• disabled: Se utiliza para indicar si se selecciona deshabilitado.
• displayRender: Es la función render de mostrar las opciones seleccionadas.
• dropdownRender: Se utiliza para el contenido desplegable personalizado.
• expandIcon: se utiliza para personalizar el icono de expansión del elemento actual.
• expandTrigger: se usa para expandir el elemento actual al hacer clic o pasar el mouse, uno de hacer clic al pasar el mouse.
• fieldNames: se utiliza para el nombre de campo personalizado para la etiqueta y el valor y los niños.
• getPopupContainer: es el Node principal al que se debe representar el selector.
• loadData: Se utiliza para cargar opciones de forma perezosa.
• notFoundContent: se utiliza para especificar contenido para mostrar cuando ningún resultado coincide.
• opciones: Se utiliza para las opciones de datos de cascada.
• marcador de posición: se utiliza para indicar el marcador de posición de entrada.
• popupClassName: se utiliza para el nombre de clase adicional de la superposición emergente.
• popupPlacement: se utiliza para la alineación emergente preestablecida.
• popupVisible: se utiliza para establecer la visibilidad de la ventana emergente en cascada
• showSearch: se utiliza para indicar si mostrar la entrada de búsqueda en modo único o no.
• tamaño: se utiliza para indicar el tamaño de entrada.
• estilo: Se utiliza para el estilo adicional.
• suffixIcon: Se utiliza para el icono de sufijo personalizado.
• valor: Se utiliza para denotar el valor seleccionado.
• onChange: es una función de devolución de llamada que se activa al finalizar la selección de cascada.
• onPopupVisibleChange: es una función de devolución de llamada que se activa cuando se muestra u oculta la ventana emergente.

MostrarAccesorios de búsqueda:

• filtro: la opción que se pasa como parámetro a esta función se incluirá en el conjunto filtrado si esta función devuelve verdadero; de lo contrario, se excluirá.
• límite: Se utiliza para establecer el recuento de elementos filtrados.
• matchInputWidth: Se utiliza para indicar si el ancho de la lista coincide con la entrada o no.
• render: Se utiliza para renderizar opciones filtradas.
• sort: Se utiliza para ordenar las opciones filtradas.

Métodos:

• blur(): esta función se utiliza para eliminar el foco.
• focus(): esta función se utiliza para obtener el foco.

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 from 'react'
import "antd/dist/antd.css";
import { Cascader } from 'antd';
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Cascader Component</h4>
      <>
        <Cascader
          options={[
            {
              value: 'Madhya Pradesh',
              label: 'Madhya Pradesh',
              children: [
                {
                  value: 'Indore',
                  label: 'Indore',
                  children: [
                    {
                      value: 'Vijay Nagar',
                      label: 'Vijay Nagar',
                    }, {
                      value: 'Bhawarkuwa',
                      label: 'Bhawarkuwa',
                    },
                    {
                      value: 'MR10',
                      label: 'MR10',
                    },
                  ],
                },
              ],
            },
          ]}
          onChange={(data) => { console.log(data) }}
          placeholder="Select destination" />
      </>
    </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/cascader/