¿Cómo se crean los formularios en ReactJS?

El formulario es un documento que almacena información de un usuario en un servidor web mediante controles interactivos. Un formulario contiene diferentes tipos de información, como nombre de usuario, contraseña, número de contacto, identificación de correo electrónico, etc. Los formularios son un componente muy importante de un sitio web. Porque permite la recopilación de datos del usuario directamente, lo que hace que el sitio web sea mucho más interactivo. Crear un formulario en React es casi similar a HTML si lo mantenemos simple y solo creamos un formulario estático. Pero hay muchas diferencias que surgen al manejar los datos y recuperar el envío del formulario.

Componentes controlados: en elementos HTML simples como la etiqueta de entrada, el valor del campo de entrada cambia cada vez que el usuario escribe. Pero, en React, cualquiera que sea el valor que el usuario escriba, lo guardamos en el estado y pasamos el mismo valor a la etiqueta de entrada como su valor, por lo que aquí DOM no cambia su valor, está controlado por el estado de reacción. 

Creando una aplicación de reacción:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app name_of_the_app

Paso 2: después de crear la aplicación de reacción, muévase al directorio según el nombre de su aplicación usando el siguiente comando:

cd name_of_the_app

Estructura del proyecto:  Tendrá el siguiente aspecto.

Ahora vamos a entender con diferentes ejemplos.

Ejemplo 1: en este ejemplo, vamos a crear un componente de formulario simple dentro del componente de la aplicación del archivo App.js. Este es solo un formulario estático y no contiene ningún tipo de manejo y procesamiento dinámico de eventos, por lo que este formulario es básico y no satisface nuestros requisitos.

Aplicación.js

import React from 'react';
import './App.css';
  
function App() {
  
  return (
    <div className='App'>
      <div>
        <label>Input</label>
        <input type='text'/>
      </div>
      <div>
        <label>Textarea</label>
        <textarea rows='5'></textarea>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </div>
  );
}
  
export default App;

Producción:

Ejemplo 2: En este ejemplo, imprimiremos el valor dentro del cuadro de entrada en el registro de la consola. Para llegar a esto tenemos que hacer lo siguiente:

• Cree una nueva función llamada ‘detectChange’ . Esta función imprimirá el valor del elemento JSX de destino.
• Llame a esta función en el evento ‘onChange’.
• Esto imprimirá el valor del cuadro de entrada cada vez que se cambie.

Aplicación.js

import React from 'react';
import './App.css';
  
function App() {
  
  function detectChange(e){
    console.log(e.target.value)
  }
  
  return (
    <div className='App'>
      <div>
        <label>Input :</label>
        <input type='text' onChange={detectChange}/>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </div>
  );
}
  
export default App;

Producción:

Ejemplo 3: en este ejemplo, representaremos el valor dentro del cuadro de entrada en otro elemento DOM dentro del mismo componente usando el estado de reacción. Dentro del componente App de App.js

• Crea un estado inputValue con el valor de una string vacía.
• Establezca el atributo de valor del cuadro de entrada igual al estado inputValue.
• Actualice el estado de inputValue usando el método setState() cada vez que ocurra un cambio dentro del cuadro de entrada.
• Establezca el texto después de ‘Valor ingresado:’ igual al estado inputValue.

Aplicación.js

import React from 'react';
class App extends React.Component {
      
    state = { inputValue: '' };
    render() {
        return (
        <div>
            <form>
                <label> Input </label>
                <input type="text"
                    value={this.state.inputValue}
                    onChange={(e) => this.setState(
                    { inputValue: e.target.value })}/>
            </form>
            <div>
                Entered Value: {this.state.inputValue}
            </div>
         </div>
        );
    }
}
  
export default App;

Producción :