Componente de formulario ReactJS Reactstrap

Reactstrap es una biblioteca front-end popular que es fácil de usar con componentes React Bootstrap 4. Esta biblioteca contiene los componentes React sin estado para Bootstrap 4. Podemos usar el siguiente enfoque en ReactJS para usar el componente de formulario ReactJS Reactstrap.

Accesorios de entrada:

• children: Se utiliza para pasar el elemento children a este componente.
• tipo: se utiliza para indicar el tipo como radio, casilla de verificación, seleccionar, etc.
• tamaño: Se utiliza para indicar el tamaño de este componente.
• bsSize: se utiliza para indicar el tamaño bs como grande, pequeño, etc.
• estado: se utiliza para indicar el estado de este componente.
• válido: se utiliza para aplicar la clase es válida cuando se establece en verdadero.
• invalid: se utiliza para aplicar la clase is-invalid cuando se establece en true.
• etiqueta: se usa para pasar elementos personalizados para usar.
• innerRef: se utiliza para obtener una referencia al elemento DOM.
• static: Se utiliza para indicar si se aplica o no la clase static.
• texto plano: Se utiliza para indicar si se aplica o no la clase de texto plano.
• addon: Se utiliza para indicar si el addon está añadido o no.
• className: se utiliza para indicar el nombre de la clase para el estilo.
• cssModule: se utiliza para indicar el módulo CSS para el estilo.

Accesorios de entrada personalizados:

• children: Se utiliza para pasar el elemento children a este componente.
• id: se utiliza para denotar el atributo id para la identificación única.
• tipo: se utiliza para indicar el tipo como radio, casilla de verificación, seleccionar, etc.
• etiqueta:   Se utiliza para casillas de verificación y radios.
• en línea: se utiliza para aplicar la clase linline cuando se establece en verdadero.
• válido: se utiliza para aplicar la clase es válida cuando se establece en verdadero.
• invalid: se utiliza para aplicar la clase is-invalid cuando se establece en true.
• bsSize: se utiliza para indicar el tamaño bs como grande, pequeño, etc.
• cssModule: se utiliza para indicar el módulo CSS para el estilo.
• children: Se utiliza para pasar el elemento children a este componente.
• innerRef: se utiliza para obtener una referencia al elemento DOM.

Accesorios de formulario:

• children: Se utiliza para pasar el elemento children a este componente.
• en línea: se utiliza para aplicar la clase linline cuando se establece en verdadero.
• etiqueta: se usa para pasar elementos personalizados para usar.
• innerRef: se utiliza para obtener una referencia al elemento DOM.
• className: se utiliza para indicar el nombre de la clase para el estilo.
• cssModule: se utiliza para indicar el módulo CSS para el estilo.

Apoyos FormFeedback:

• children: Se utiliza para pasar el elemento children a este componente.
• etiqueta: se usa para pasar elementos personalizados para usar.
• className: se utiliza para indicar el nombre de la clase para el estilo.
• cssModule: se utiliza para indicar el módulo CSS para el estilo.
• válido: se utiliza para aplicar la clase es válida cuando se establece en verdadero.
• información sobre herramientas: se utiliza para mostrar la información sobre herramientas, pero la condición es que el elemento principal debe contener el estilo de posición relativa.

Accesorios de FormGroup:

• children: Se utiliza para pasar el elemento children a este componente.
• fila: se utiliza para aplicar la clase de fila cuando se establece en verdadero.
• check: se utiliza para aplicar la clase de verificación de formulario cuando se establece en verdadero.
• en línea: se utiliza para aplicar la clase linline cuando se establece en verdadero.
• disabled: se aplica la clase disabled cuando la verificación y los accesorios deshabilitados son verdaderos, no hace nada cuando es falso.
• etiqueta: se usa para pasar elementos personalizados para usar.
• className: se utiliza para indicar el nombre de la clase para el estilo.
• cssModule: se utiliza para indicar el módulo CSS para el estilo.

Accesorios de FormText:

• children: Se utiliza para pasar el elemento children a este componente.
• en línea: se utiliza para aplicar la clase linline cuando se establece en verdadero.
• etiqueta: se usa para pasar elementos personalizados para usar.
• color: se utiliza para indicar el color de este componente.
• className: se utiliza para indicar el nombre de la clase para el estilo.
• cssModule: se utiliza para indicar el módulo CSS para el estilo.

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 reactstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, hemos mostrado el componente de formulario sin el uso del componente Col y el apoyo de fila.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    FormGroup, Label, Input,
    Button, Form
} from 'reactstrap';
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 550, padding: 30
        }}>
            <h5>ReactJS Reactstrap Form Component</h5>
            <Form>
                <FormGroup>
                    <Label for="emailField">EMAIL:</Label>
                    <Input type="email" name="email" id="emailField"
                        placeholder="Enter your email" />
                </FormGroup>
                <FormGroup>
                    <Label for="passwordField">PASSWORD:</Label>
                    <Input type="password" name="password" 
                        id="passwordField"
                        placeholder="Enter your password" />
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        </div >
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, hemos mostrado el componente de formulario con el uso del componente Col y la propiedad de fila.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    FormGroup, Label, Input,
    Button, Form, Col
} from 'reactstrap';
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 950, padding: 30
        }}>
            <h5>ReactJS Reactstrap Form Component</h5>
            <Form inline>
                <FormGroup row className="mb-2 mr-sm-2 mb-sm-0">
                    <Col sm={4}>
                        <Label for="emailField">EMAIL:</Label>
                        <Input type="email" name="email" id="emailField"
                            placeholder="Enter your email" />
                    </Col>
                    <Col sm={4}>
                        <Label for="passwordField">PASSWORD:</Label>
                        <Input type="password" name="password" 
                            id="passwordField"
                            placeholder="Enter your password" />
                    </Col>
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        </div >
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://reactstrap.github.io/components/form/