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. CheckTreePicker es compatible con múltiples selectores para múltiples selecciones de estructuras de datos complejas.
La opción deshabilitada se usa para hacer que algunas opciones/componentes completos en el CheckTreePicker sean no seleccionables o no verificables. Solo necesitamos mencionar los índices de las opciones para deshabilitarlas o no marcarlas.
La opción de solo lectura hace que el valor predeterminado sea el seleccionado. El usuario no puede cambiarlo. Es solo para fines de lectura.
Sintaxis:
<CheckTreePicker data={data}
uncheckableItemValues={[indexes of values to make uncheckable]} />
<CheckTreePicker readOnly data={data}
defaultValue={[Any default value]} />
<CheckTreePicker data={data}
disabledItemValues={[indexes of values to make them disable}/>
<CheckTreePicker disabled data={data}
defaultValue={[Index of default value]} />
Parámetros
- data: Estas son las opciones en forma de JSON
- Índices: Estos son los valores de las opciones. Cuando creamos opciones , definimos un valor de miembro para cada objeto.
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 npm install @thumbtack/thumbprint-react
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo 1: En este ejemplo, aprenderemos a deshabilitar componentes completos y también a deshabilitar opciones particulares.
- App.js: 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.
Javascript
import React from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
import { Label } from '@thumbtack/thumbprint-react';
export default function App() {
// Sample Options
const data = [
{
"label": "GeeksforGeeks",
"value": 1,
"children": [
{
"label": "Machine Learning",
"value": 2
},
{
"label": "Data Structures",
"value": 3,
"children": [
{
"label": "Java",
"value": 4
},
{
"label": "C++",
"value": 5
},
{
"label": "Python",
"value": 6
},
{
"label": "C#",
"value": 7
},
]
}
]
},
{
"label": "StackOverFlow",
"value": 8,
"children": [
{
"label": "Databases",
"value": 9
},
{
"label": "Operating System",
"value": 10,
"children": [
{
"label": "linux",
"value": 11
},
{
"label": "Windows",
"value": 12
}
]
}
]
},
{
"label": "Tutorial Point",
"value": 13,
"children": [
{
"label": "Engineering Mathematics",
"value": 14
},
{
"label": "Theory of Computation",
"value": 15
}
]
}
]
return (
<div className="App">
<h1 style={{ color: 'green' }} >
GeeksforGeeks</h1>
<h3>React Suite CheckTreePicker Disabled
and ReadOnly</h3>
<Label>Disabled: </Label>
<CheckTreePicker disabled data={data}
defaultValue={[2]}
style={{ width: '50%' }} />
<br />
<hr />
<Label>Disabled option: </Label>
<CheckTreePicker
defaultExpandAll
data={data}
disabledItemValues={[1, 3, 13]}
style={{ width: '50%' }}
/>
<br />
<hr />
</div>
);
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
Ejemplo 2: En este ejemplo, aprenderemos sobre Uncheckable y readOnly
Javascript
import React from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
import { Label } from '@thumbtack/thumbprint-react';
export default function App() {
// Sample Options
const data = [
{
"label": "GeeksforGeeks",
"value": 1,
"children": [
{
"label": "Machine Learning",
"value": 2
},
{
"label": "Data Structures",
"value": 3,
"children": [
{
"label": "Java",
"value": 4
},
{
"label": "C++",
"value": 5
},
{
"label": "Python",
"value": 6
},
{
"label": "C#",
"value": 7
},
]
}
]
},
{
"label": "StackOverFlow",
"value": 8,
"children": [
{
"label": "Databases",
"value": 9
},
{
"label": "Operating System",
"value": 10,
"children": [
{
"label": "linux",
"value": 11
},
{
"label": "Windows",
"value": 12
}
]
}
]
},
{
"label": "Tutorial Point",
"value": 13,
"children": [
{
"label": "Engineering Mathematics",
"value": 14
},
{
"label": "Theory of Computation",
"value": 15
}
]
}
]
return (
<div className="App">
<h1 style={{ color: 'green' }} >
GeeksforGeeks</h1>
<h3>React Suite CheckTreePicker
Disabled and ReadOnly</h3>
<Label>Uncheckable: </Label>
<CheckTreePicker
defaultExpandAll
data={data}
uncheckableItemValues={[1, 5, 12]}
style={{ width: '50%' }}
/>
<hr />
<Label>Read only: </Label>
<CheckTreePicker readOnly data={data}
defaultValue={[1]} style={{ width: '50%' }} />
<hr />
</div>
);
}
Producción:
Referencia: https://rsuitejs.com/components/check-tree-picker/#disabled-and-read-only
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA