React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.
En este artículo, aprenderemos sobre la suite React CheckTreePicker Async. CheckTreePicker se utiliza como selectores múltiples para la selección de múltiples estructuras de datos complejas. En async CheckTreePicker, el Node de datos se carga de forma asíncrona con la ayuda de la propiedad getChildren.
Accesorios de CheckTreePicker:
- apariencia : Se utiliza para la apariencia del componente.
- block : Se utiliza para bloquear una fila entera.
- cascada : Se utiliza para indicar si se selecciona cascada o no.
- childrenKey : se utiliza para denotar el nombre de la propiedad Children de la estructura de datos del árbol.
- cleanable : Se utiliza para indicar si la opción se puede vaciar o no.
- contenedor : se utiliza para establecer el contenedor de renderizado.
- contable : se utiliza para indicar si se muestran los recuentos de elementos de verificación o no.
- data : Se utiliza para denotar los datos seleccionables.
- defaultExpandAll : se utiliza para expandir todos los Nodes de forma predeterminada.
- defaultExpandItemValues : se utiliza para establecer el valor del Node expandido predeterminado.
- 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 opcional.
- expandItemValues : Se utiliza para establecer el valor del Node expandido (controlado).
- altura : Se utiliza para indicar la altura del menú.
- labelKey : se utiliza para configurar las opciones para mostrar la ‘clave’ en ‘datos’.
- 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.
- onExpand : es una función de devolución de llamada que se activa cuando se muestra el Node del árbol.
- 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.
- 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 de componentes.
- 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.
- renderTreeIcon : se utiliza para indicar el icono de renderizado personalizado.
- renderTreeNode : se utiliza para indicar el Node de árbol de renderizado personalizado.
- 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.
- toggleComponentClass : se puede usar para el elemento personalizado de este componente.
- uncheckableItemValues : se utiliza para establecer el valor de la opción para que la casilla de verificación no se represente.
- value : 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 usar o no la Lista virtualizada.
- caretAs : se utiliza para agregar un icono de intercalación personalizado.
Sintaxis:
<CheckTreePicker onOpen={() => {...}}
getChildren={(activeNode) => ... } />
Creación de la aplicación React e instalación del módulo:
Paso 1 : Cree una aplicación React usando el comando dado:
npm create-react-app projectname
Paso 2: después de crear su proyecto, muévase a él usando el comando dado:
cd projectname
Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:
npm install rsuite
Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:
Ejemplo 1: El siguiente ejemplo demuestra la implementación básica de async CheckTreePicker.
Javascript
import { useState } from "react";
import { CheckTreePicker } from "rsuite";
import SpinnerIcon from "@rsuite/icons/legacy/Spinner";
import "rsuite/dist/rsuite.min.css";
export default function App() {
const [value, setValue] = useState([]);
const [data, setData] = useState([]);
const customData = [
{
label: "Algorithms",
value: 1,
children: [
{
label: "Searching",
value: 2,
children: [
{
label: "Binary Search",
value: 3,
},
{
label: "Linear Search",
value: 4,
},
],
},
{
label: "Sorting",
value: 5,
children: [
{
label: "Selection Sort",
value: 6,
},
{
label: "Bubble Sort",
value: 7,
},
{
label: "Merge Sort",
value: 8,
},
],
},
],
},
];
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckTreePicker Async</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckTreePicker
data={customData}
value={value}
style={{ width: 280 }}
onChange={(value) => setValue(value)}
onOpen={() => {
if (data.length === 0) {
setTimeout(() => {
setData([
{
label: "Parent Node",
value: "0",
children: [],
},
]);
}, 2000);
}
}}
renderMenu={(menuTree) => {
if (data.length === 0) {
return (
<p style={
{ padding: 6, textAlign: "center" }}>
<SpinnerIcon size="md" spin />
Loading...
</p>
);
}
return menuTree;
}}
getChildren={(activeNode) =>
new Promise((resolve) => {
setTimeout(() => {
resolve([
{
label: "Child Node",
value: `${activeNode.refKey}-0`,
children: [],
},
{
label: "Child Node",
value: `${activeNode.refKey}-1`,
children: [],
},
]);
}, 2000);
})
}
/>
</div>
</div>
</center>
);
}
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el CheckTreePicker asíncrono junto con las opciones deshabilitadas.
Javascript
import { useState } from "react";
import { CheckTreePicker } from "rsuite";
import SpinnerIcon from "@rsuite/icons/legacy/Spinner";
import "rsuite/dist/rsuite.min.css";
export default function App() {
const [value, setValue] = useState([]);
const [data, setData] = useState([]);
const customData = [
{
label: "Algorithms",
value: 1,
children: [
{
label: "Searching",
value: 2,
children: [
{
label: "Binary Search",
value: 3,
},
{
label: "Linear Search",
value: 4,
},
],
},
{
label: "Sorting",
value: 5,
children: [
{
label: "Selection Sort",
value: 6,
},
{
label: "Bubble Sort",
value: 7,
},
{
label: "Merge Sort",
value: 8,
},
],
},
],
},
];
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckTreePicker Async</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckTreePicker
data={customData}
value={value}
style={{ width: 280 }}
onChange={(value) => setValue(value)}
disabledItemValues={[4, 6, 7]}
onOpen={() => {
if (data.length === 0) {
setTimeout(() => {
setData([
{
label: "Parent Node",
value: "1",
children: [],
},
]);
}, 1000);
}
}}
renderMenu={(menuTree) => {
if (data.length === 0) {
return (
<p style={
{ padding: 6, textAlign: "center" }}>
<SpinnerIcon size="md" spin />
Loading...
</p>
);
}
return menuTree;
}}
getChildren={(activeNode) =>
new Promise((resolve) => {
setTimeout(() => {
resolve([
{
label: "Child Node",
value: `${activeNode.refKey}-0`,
children: [],
},
{
label: "Child Node",
value: `${activeNode.refKey}-1`,
children: [],
},
]);
}, 1000);
})
}
/>
</div>
</div>
</center>
);
}
Producción:
Referencia : https://rsuitejs.com/components/check-tree-picker/#async
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA