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 prop deshabilitada define si el componente Cascader está deshabilitado o no. Toma un valor booleano. Es cierto por defecto. La propiedad disabledItemValues define los elementos deshabilitados del componente. Toma una lista de strings como valor. El atributo readOnly define si el componente Cascader es solo un componente legible o no. Toma un valor booleano. Es cierto por defecto. El atributo plainText define si el componente Cascader aparece como texto sin formato o no. Toma un valor booleano. Es cierto por defecto.
Sintaxis:
<Cascader disabled />
<Cascader disabledItemValues={[]}/>
<Cascader readOnly />
<Cascader plainText/>
Requisito previo:
- Introducción e Instalación reactJS
- Componente en cascada de React Suite
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 datos que contienen los nombres de los países a la propiedad de datos del componente, al primero le pasamos la propiedad deshabilitada , y al siguiente le estamos pasando el valor de la propiedad disabledItemValues como [“Alemania ”, “Sri Lanka”].
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 Disabled</h4>
<p>
<b style={{ marginLeft: 30 }}>Disabled </b>
<b style={{ marginLeft: 80 }}> Disabled Options</b>
</p>
<Cascader
placeholder="disabled"
data={countries}
style={{ marginLeft: 30, marginTop: 10 }}
disabled
/>
<Cascader
placeholder="Germany, Sri Lanka"
data={countries}
style={{ marginLeft: 30, marginTop: 10 }}
disabledItemValues={["Germany", "Sri Lanka"]}
/>
</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 importando el componente Cascader desde «rsuite» y aplicando los estilos predeterminados de los componentes que 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, en el primero pasamos el atributo readOnly y el valor predeterminado como «Assam», y al siguiente le estamos pasando texto sin formato. atributo y defaultValue como «Alemania».
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 readOnly and plaintext</h4>
<p>
<b style={{ marginLeft: 30 }}>Read Only </b>
<b style={{ marginLeft: 80 }}> Plain text</b>
</p>
<Cascader
data={countries}
style={{ marginLeft: 30, marginTop: 10 }}
defaultValue="Assam"
readOnly
/>
<Cascader
data={countries}
style={{ marginLeft: 30, marginTop: 10 }}
defaultValue="Germany"
plaintext
/>
</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/#disabled-and-read-only