React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. Componente InputPickerPodemos usar el siguiente enfoque en ReactJS para usar el componente InputPicker de React Suite.
Accesorios del selector de entrada:
- bloque: Se utiliza para bloquear una fila entera.
- classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
- cleanable: Se utiliza para indicar si la opción se puede vaciar o no.
- contenedor: Se utiliza para establecer el contenedor de renderizado.
- creable: La configuración puede crear nuevas opciones.
- datos: Se utiliza para indicar los datos seleccionables.
- defaultValue: se utiliza para indicar el valor predeterminado.
- disabled: Se utiliza para indicar si el componente está deshabilitado o no.
- disabledItemValues: Se utiliza para deshabilitar opcionales.
- groupBy: Se utiliza para establecer el criterio de agrupación ‘clave’ en ‘datos’.
- labelKey: Se utiliza para establecer las opciones para mostrar la ‘clave’ en ‘datos’.
- listProps: se utiliza para indicar las propiedades relacionadas con la lista en react-virtualized.
- maxHeight: se utiliza para establecer la altura máxima del menú desplegable.
- menuClassName: se utiliza para indicar una clase CSS para aplicar al Node Menú DOM.
- menuStyle: se utiliza para denotar un estilo para aplicar al Node Menú DOM.
- onChange: es una función de devolución de llamada que se activa cuando cambia el valor.
- onClean: es una función de devolución de llamada que se activa cuando se limpia el valor.
- onClose: es una función de devolución de llamada que se activa en un evento de cierre.
- onEnter: es una función de devolución de llamada que se activa antes de que se produzca la transición de la superposición.
- onEntered: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
- onEntering: es una función de devolución de llamada que se activa cuando la superposición comienza a hacer la transición.
- onExit: es una función de devolución de llamada que se activa justo antes de que la superposición termine.
- onExited: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
- onExiting: es una función de devolución de llamada que se activa cuando la superposición comienza a salir.
- onGroupTitleClick: haga clic en la función de devolución de llamada para el encabezado del grupo.
- onOpen: es una función de devolución de llamada que se activa al abrir el componente.
- onSearch: Es una función de devolución de llamada para la búsqueda.
- onSelect: es una función de devolución de llamada que se activa al seleccionar una opción.
- marcador de posición: se utiliza para indicar el marcador de posición.
- colocación: Se utiliza para la colocación del componente.
- preventOverflow: se utiliza para evitar el desbordamiento de elementos flotantes.
- renderExtraFooter: se utiliza para el pie de página adicional de renderizado personalizado.
- renderMenu: se utiliza para personalizar la lista del menú de renderizado.
- renderMenuGroup: se utiliza para el grupo de opciones de procesamiento personalizado.
- renderMenuItem: se utiliza para las opciones de renderización personalizadas.
- renderValue: se utiliza para las opciones seleccionadas de renderización personalizadas.
- searchBy: Se utiliza para las reglas de búsqueda personalizadas.
- searchable: Se utiliza para indicar si se pueden buscar opciones o no.
- tamaño: se utiliza para indicar el tamaño del selector.
- sort: Se utiliza para las opciones de ordenación.
- toggleComponentClass: se puede usar para el elemento personalizado de este componente.
- valor: Se utiliza para denotar el valor (Controlado).
- valueKey: Se utiliza para establecer el valor de la opción ‘clave’ en ‘datos’.
- virtualizado: Se utiliza para indicar si se utiliza o no Lista Virtualizada.
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 rsuite
Estructura del proyecto: Tendrá el siguiente aspecto.
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.
App.js
import React from 'react' import 'rsuite/dist/styles/rsuite-default.css'; import { InputPicker } from 'rsuite'; export default function App() { // Sample data const options = [{ "label": "Monday", "value": "Monday", "role": "Master", }, { "label": "Tuesday", "value": "Tuesday", "role": "Master", }, { "label": "Wednesday", "value": "Wednesday", "role": "Master", }, { "label": "Thursday", "value": "Thursday", "role": "Master", }, { "label": "Friday", "value": "Friday", "role": "Master", }, { "label": "Saturday", "value": "Saturday", "role": "Master", }, { "label": "Sunday", "value": "Sunday", "role": "Master", }] return ( <div style={{ display: 'block', width: 600, paddingLeft: 30 }}> <h4>React Suite InputPicker Component</h4> <InputPicker placeholder="Enter Weekday" data={options} /> </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://rsuitejs.com/components/input-picker/
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA