Grupo de casillas de verificación de React Suite (controlado)

React suite es una biblioteca de componentes de React que tiene 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 React Suite Checkbox Group Controlled. Un grupo de casillas de verificación controlado denota el valor de la casilla marcada que se implementa a través del cambio de estados en reaccionar.

Accesorios de casilla de verificación:

• marcada : Especifica si la casilla de verificación está seleccionada o no.
• defaultChecked : especifica el estado inicial de si la casilla de verificación está seleccionada o no.
• disabled : deshabilita la casilla de verificación cuando se establece en verdadero.
• id : Denota el atributo id general de la casilla de verificación.
• indeterminado : Denota el estado marcado indeterminado de la casilla de verificación.
• en línea : se utiliza para el diseño en línea.
• inputRef : se utiliza para indicar la referencia del elemento de entrada. nombre: se utiliza para indicar el atributo de nombre de la casilla de verificación.
• nombre: Denota el nombre del formulario
• onChange : es la función de devolución de llamada que se activa cuando cambia el estado.
• title : Denota el título HTML.
• value : Denota el valor de CheckboxGroup.

Accesorios de CheckboxGroup:

• defaultValue : Denota el valor predeterminado.
• en línea : se utiliza para el diseño en línea.
• name : Denota el atributo de nombre de la casilla de verificación.
• onChange : es la función de devolución de llamada que se activa cuando cambia el estado.
• value : Denota el valor de la casilla marcada (Controlado).

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:

 

Sintaxis:

//App.JS file

function App() {
    const [value, setValue] = useState(['A', 'B'])

    <CheckboxGroup value={value} onChange={...}>
        <Checkbox value="A">...</Checkbox>
        <Checkbox value="B">...</Checkbox>
    </CheckboxGroup>
}

Ejemplo 1: El siguiente ejemplo demuestra el control del grupo básico de casillas de verificación.

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup } from "rsuite";
  
export default function App() {
    const [chkValue, setChkValue] = useState(["j", "s"]);
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Checkbox Group Controlled
                </h4>
  
                <div style={{ marginTop: 20, width: 240 }}>
                    <CheckboxGroup
                        inline
                        name="checkboxList"
                        value={chkValue}
                        onChange={(value) => {
                            setChkValue(value);
                        }}
                    >
                        <Checkbox value="j">Java Course</Checkbox>
                        <Checkbox value="c">C++ Course</Checkbox>
                        <Checkbox value="d">DSA Course</Checkbox>
                        <Checkbox value="s">
                            Self paced DSA course
                        </Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra el grupo de casillas de verificación controlado con título y accesorios deshabilitados.

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup } from "rsuite";
  
export default function App() {
    const [chkValue, setChkValue] = useState(["a", "c"]);
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Checkbox Group Controlled
                </h4>
  
                <div style={{ marginTop: 20, width: 1000 }}>
                    <CheckboxGroup
                        inline
                        name="checkboxList"
                        value={chkValue}
                        onChange={(value) => {
                            setChkValue(value);
                        }}
                    >
                        <Checkbox value="a" title="T&C">
                            I agree to terms & conditions of GFG.
                        </Checkbox>
                        <Checkbox value="b">
                            Want the premium access to 
                            GeeksforGeeks Job portal!
                        </Checkbox>
                        <Checkbox value="c" disabled>
                            Sign up of GeeksforGeeks newsletter.
                        </Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/checkbox/#checkbox-grupo-controlado