Cómo crear formularios en React con Reactstrap

Introducción

Reactstrap ofrece componentes Bootstrap 4 prediseñados que permiten una gran flexibilidad y validación prediseñada. Esto nos permite crear rápidamente formularios atractivos que garantizamos impresionarán y brindarán una experiencia de usuario intuitiva.

En este tutorial, utilizará Reactstrap para crear un formulario de inicio de sesión en una aplicación React.

Prerrequisitos

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .
• Si tienes alguna familiaridad con React, puedes leer nuestra serie Cómo programar en React.js .
• Algunos conocimientos de Bootstrap 4. Puedes leer la documentación oficial de Bootstrap 4.6 .

Este tutorial fue verificado con Node v16.2.0, npmv7.14.0, reactv17.0.2, reactstrapv8.9.0 y bootstrapv4.6.0.

Paso 1: Configuración del proyecto

Comience a usar create-react-apppara generar una aplicación React y luego instale las dependencias:

npx create-react-app reactstrap-example

Cambiar al nuevo directorio del proyecto:

cd reactstrap-example

Ahora, puedes ejecutar la aplicación React:

npm start

Corrija cualquier error o problema que tenga con su proyecto y acceda a él localhost:3000desde un navegador web.

Una vez que tengas una aplicación React en funcionamiento, puedes instalar reactstrap:

npm install reactstrap@8.9.0

Luego puedes instalar bootstrap:

npm install bootstrap@4

Nota: Es importante que, al usar Reactstrap, especifiques la versión 4.x de Bootstrap para que se instale la versión compatible. Si no especificas una versión, se instalará la versión más reciente de Bootstrap, que actualmente es la 5.x.

A continuación, abra el src/index.jsarchivo en su editor de código. Agregue la siguiente línea para utilizar los estilos de Bootstrap en su proyecto:

fuente/index.js

import 'bootstrap/dist/css/bootstrap.min.css';

En este punto, tendrás una nueva aplicación React con las dependencias de Reactstrap y Bootstrap.

Paso 2: Uso de componentes de formulario

Reactstrap nos permite tener Formcomponentes prediseñados que incluyen cualquier cosa, desde el texto estándar Inputhasta una carga de archivos más avanzada Input.

Primero, importe el Componentsfrom reactstrap. En este ejemplo, importaremos Button, Form, , y FormGrouppara usarlos directamente en nuestro formulario de inicio de sesión.InputLabel

import {  Button,  Form,  FormGroup,  Input,  Label} from 'reactstrap';

Ahora que tenemos los componentes necesarios, construyamos el formulario.

Reactstrap acepta elementos propscomo type, name, idy placeholder.

• typedefine el tipo de entrada, como cargas de archivos, botones de opción o incluso entradas de texto más específicas, como el correo electrónico.
• namees la clave para el par clave-valor que finalmente se enviará a nuestro backend.
• idEs lo que usamos cuando manipulamos el DOM.
• placeholderNos permite agregar texto de ejemplo a la entrada.

Ábrelo App.jsen tu editor de código y agrega las siguientes líneas de código:

fuente/App.js

import { Component } from 'react';import {  Button,  Form,  FormGroup,  Input,  Label} from 'reactstrap';import './App.css';class App extends Component {  render() {    return (      div className="App"        h2Sign In/h2        Form className="form"          FormGroup            Label for="exampleEmail"Username/Label            Input              type="email"              name="email"                           placeholder="example@example.com"            /          /FormGroup          FormGroup            Label for="examplePassword"Password/Label            Input              type="password"              name="password"                           placeholder="********"            /          /FormGroup        ButtonSubmit/Button      /Form    /div  );}export default App;

Luego, ábrelo App.cssen tu editor de código y reemplázalo con los siguientes estilos:

Aplicación.css

.App {  border: 2px solid #d3d3d3;  border-radius: .5em;  margin-bottom: 1em;  margin-left: auto;  margin-right: auto;  margin-top: 100px;  padding: 1em;  text-align: left;  width: 600px;}.form {  padding: 1em;}label {  font-weight: 600;}

Guarde los cambios y observe la aplicación en su navegador web:

Reactstrap ofrece múltiples formas integradas de diseñar nuestros componentes de formulario. Estos son algunos de los elementos clave que pueden resultar útiles:

• Colores: Reactstrap admite los colores integrados de Bootstrap cuando se utilizan classNames como has-success.
• Formulario en línea: Dentro Formpodemos agregar para colocar su y en la misma fila.Form inlineLabelInput
• Contenedores, filas y columnas: Coles el contenedor de Reactstrap para las columnas de Bootstrap. Esto nos permite dar formato no solo para computadoras de escritorio, sino también para dispositivos móviles y tabletas.

En este punto, tienes una aplicación React con un formulario de inicio de sesión que utiliza el estilo Bootstrap.

Paso 3: agregar validación y sugerencias para el usuario

FormTextNos permite agregar texto indicador adicional encima o debajo del campo.

Para este ejemplo, el campo “Nombre de usuario” esperará un valor en forma de dirección de correo electrónico. FormTextSe agregó para informar al usuario sobre el valor esperado.

FormTextYour username is most likely your email./FormText

Guarde los cambios y observe la aplicación en su navegador web:

Antes de agregar FormFeedbacka este ejemplo, deberá administrar el estado:

constructor(props) {  super(props);  this.state = {    email: '',    validate: {      emailState: '',    },  };}render() {  const { email } = this.state;  // ...}

Y manejar cambios en el formulario:

constructor(props) {  super(props);  // ...  this.handleChange = this.handleChange.bind(this);}handleChange = (event) = {  const { target } = event;  const value = target.type === 'checkbox' ? target.checked : target.value;  const { name } = target;  this.setState({    [name]: value,  });};

FormFeedbackValida campos al instante. Tienes la flexibilidad de personalizar la validación de entradas. Agrega una función con expresiones regulares para validar el correo electrónico en el onChangeevento y establece has-successo has-dangeren el estado.

validateEmail(e) {  const emailRegex = /^(([^()[].,;:s@"]+(.[^()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;  const { validate } = this.state;  if (emailRegex.test(e.target.value)) {    validate.emailState = 'has-success';  } else {    validate.emailState = 'has-danger';  }  this.setState({ validate });}

Advertencia: existe una especificación estándar para validar direcciones de correo electrónico. Esta expresión regular simplificada se proporciona únicamente con fines didácticos.

Para aplicar esto a su Input, agregue la validpropiedad con su condicional:

valid={ this.state.validate.emailState === 'has-success' }

Y el invalidapoyo con tu condicional:

invalid={ this.state.validate.emailState === 'has-danger' }/

Crea un FormFeedbackpara mostrar el texto de error de forma predeterminada:

FormFeedback  Uh oh! Looks like there is an issue with your email. Please input a correct email./FormFeedback

Crea un segundo FormFeedbackcon un validaccesorio para mostrar el texto de éxito:

FormFeedback valid  That's a tasty looking email you've got there./FormFeedback

Luego, agrega value, validateEmail, y handleChangea tu Input:

Input  type="email"  name="email"   placeholder="example@example.com"  valid={ this.state.validate.emailState === 'has-success' }  invalid={ this.state.validate.emailState === 'has-danger' }  value={ email }  onChange={ (e) = {                      this.validateEmail(e);                      this.handleChange(e);                    } }/

El usuario recibirá comentarios con has-dangerestilos cuando ingrese su nombre de usuario incorrectamente:

Y el usuario recibirá retroalimentación con has-successestilos cuando ingrese su nombre de usuario correctamente:

Ahora, su formulario utiliza FormText, FormFeedbacky validación.

Paso 4: Envío del formulario

Finalmente, al enviar normalmente enviaríamos los datos a nuestra base de datos, pero en nuestro ejemplo, registraremos el correo electrónico mediante la consola usando una submitFormfunción.

submitForm(e) {  e.preventDefault();  console.log(`Email: ${ this.state.email }`);}

Con todas las piezas en su lugar, App.jsquedará así:

fuente/App.js

import { Component } from 'react';import {  Form,  FormFeedback,  FormGroup,  FormText,  Label,  Input,  Button,} from 'reactstrap';import './App.css';class App extends Component {  constructor(props) {    super(props);    this.state = {      email: '',      password: '',      validate: {        emailState: '',      },    };    this.handleChange = this.handleChange.bind(this);  }  handleChange = (event) = {    const { target } = event;    const value = target.type === 'checkbox' ? target.checked : target.value;    const { name } = target;    this.setState({      [name]: value,    });  };  validateEmail(e) {    const emailRex =      /^(([^()[].,;:s@"]+(.[^()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;    const { validate } = this.state;    if (emailRex.test(e.target.value)) {      validate.emailState = 'has-success';    } else {      validate.emailState = 'has-danger';    }    this.setState({ validate });  }  submitForm(e) {    e.preventDefault();    console.log(`Email: ${this.state.email}`);  }  render() {    const { email, password } = this.state;    return (      div className="App"        h2Sign In/h2        Form className="form" onSubmit={(e) = this.submitForm(e)}          FormGroup            LabelUsername/Label            Input              type="email"              name="email"                           placeholder="example@example.com"              valid={this.state.validate.emailState === "has-success"}              invalid={this.state.validate.emailState === "has-danger"}              value={email}              onChange={(e) = {                this.validateEmail(e);                this.handleChange(e);              }}            /            FormFeedback              Uh oh! Looks like there is an issue with your email. Please input              a correct email.            /FormFeedback            FormFeedback valid              That's a tasty looking email you've got there.            /FormFeedback            FormTextYour username is most likely your email./FormText          /FormGroup          FormGroup            Label for="examplePassword"Password/Label            Input              type="password"              name="password"                           placeholder="********"              value={password}              onChange={(e) = this.handleChange(e)}            /          /FormGroup          ButtonSubmit/Button        /Form      /div    );  }}export default App;

Conclusión

En este tutorial, usaste Reactstrap para crear un formulario de inicio de sesión en una aplicación React. Esto te permite crear elementos de Bootstrap 4 con componentes React.

Si desea obtener más información sobre React, consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.