React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite Cascader se utiliza como una única selección de datos con una estructura de relación jerárquica.
La propiedad parentSelectable toma un valor booleano. Define si podemos seleccionar el Node principal o no.
Sintaxis:
<Cascader parentSelectable={} />
Requisito previo:
- Introducción e Instalación reactJS
- Componente en cascada de React Suite
- Gancho de reacción useState
- Uso de gancho de reacciónRef
Creación de la aplicación React y la instalación del módulo:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Paso 3: Ahora instala la dependencia usando el siguiente comando:
npm install rsuite
Estructura del proyecto: Se verá así:
Ejemplo 1: estamos importando el componente Cascader desde «rsuite» y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css».
Estamos agregando dos componentes de Cascader. Estamos pasando una lista llamada data que contiene los nombres de los países a la propiedad de datos del componente y algunos estilos en línea, el primero lo mantuvimos tal como está y al siguiente le estamos pasando el valor de la propiedad parentSelectable como verdadero.
App.js
import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
const countries = [
{
label: "India",
value: "India",
children: [
{
label: "Haryana",
value: "Haryana",
},
{
label: "Assam",
value: "Assam",
},
{
label: "West Bengal",
value: "West Bengal",
},
{
label: "Nagaland",
value: "Nagaland",
},
],
},
{
label: "Germany",
value: "Germany",
},
{
label: "Sri Lanka",
value: "Sri Lanka",
},
];
return (
<div className="App">
<h4> React Suite Cascader parentSelectable</h4>
<p>
<b style={{ marginLeft: 30 }}>
default</b>
<b style={{ marginLeft: 80 }}>
parentSelectable= true</b>
</p>
<Cascader data={countries} style={{
marginLeft: 30, marginTop: 10 }} />
<Cascader
data={countries}
style={{ marginLeft: 80, marginTop: 10 }}
parentSelectable={true}
/>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción
Ejemplo 2: estamos agregando la propiedad de datos al componente Cascader como países, que es una lista de nombres de países. Estamos agregando el componente de selección usando el gancho useRef , lo llamamos cascada y lo pasaremos a la referencia de la propiedad componente. Además, agregamos un botón con una etiqueta como el selectBool definido por el estado creado usando el gancho de reacción useState , agregamos una función onClick que llamará a la función onHandleChange que cambiará el estado actual de selectBool y cascade.current.open() mantendrá el componente abierto.
App.js
import { useState, useRef } from "react";
import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
const cascade = useRef();
const [selectBool, setSelectBool] = useState(false);
const onHandleChange = () => {
setSelectBool(!selectBool);
cascade.current.open();
};
const countries = [
{
label: "India",
value: "India",
children: [
{
label: "Haryana",
value: "Haryana",
},
{
label: "Assam",
value: "Assam",
children: [
{
label: "Darrang",
value: "Darrang",
},
{
label: "Dhemaji",
value: "Dhemaji",
},
],
},
{
label: "West Bengal",
value: "West Bengal",
children: [
{
label: "Hooghly",
value: "Hooghly",
},
{
label: "Darjeeling",
value: "Darjeeling",
},
],
},
{
label: "Nagaland",
value: "Nagaland",
},
],
},
{
label: "Germany",
value: "Germany",
},
{
label: "Sri Lanka",
value: "Sri Lanka",
},
];
return (
<div className="App">
<h4> React Suite Cascader parentSelectable</h4>
<p>
<b style={{ marginLeft: 30 }}>
parentSelectable ?</b>
<button
onClick={onHandleChange}
style={{ marginLeft: 10, fontSize: 15,
padding: 10 }}
>
{"" + selectBool}
</button>
</p>
<Cascader
data={countries}
style={{ marginLeft: 80, marginTop: 10 }}
parentSelectable={selectBool}
ref={cascade}
/>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://rsuitejs.com/components/cascader/#parent-selectable