Componente de grupo de entrada React-Bootstrap

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. El componente InputGroup proporciona Podemos usar el siguiente enfoque en ReactJS para usar el componente InputGroup react-bootstrap.

Accesorios de grupo de entrada:

• Como: se puede utilizar como un tipo de elemento personalizado para este componente.
• : se usa en la validación de formularios para manejar las esquinas redondeadas de la entrada.
• Tamaño: se utiliza para controlar el tamaño de los botones y elementos de formulario.
• BsPrefijo: CSS

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 , muévase 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 react-bootstrap 
  npm install bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: 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.

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import InputGroup from "react-bootstrap/InputGroup";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
  
export default function App() {
  return (
    <div style={{ display: "block", width: 700, padding: 30 }}>
      <h4>React-Bootstrap InputGroup Component</h4>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <InputGroup.Text>User Details Form =>
           </InputGroup.Text>
        </InputGroup.Prepend>
        <Form style={{ padding: 10 }}>
          <Form.Group>
            <Form.Label>Enter your full name:</Form.Label>
            <Form.Control type="text"
                          placeholder="Enter your full name" />
          </Form.Group>
          <Form.Group>
            <Form.Label>Enter your email address:</Form.Label>
            <Form.Control
              type="email"
              placeholder="Enter your your email address"
            />
          </Form.Group>
          <Form.Group>
            <Form.Label>Enter your age:</Form.Label>
            <Form.Control type="number" 
                          placeholder="Enter your age" />
          </Form.Group>
          <Button variant="primary" type="submit">
            Click here to submit form
          </Button>
        </Form>
      </InputGroup>
    </div>
  );
}

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://react-bootstrap.github.io/components/input-group/