ReactJS | formularios

Los formularios son realmente importantes en cualquier sitio web para iniciar sesión, registrarse o lo que sea. Es fácil hacer un formulario, pero los formularios en React funcionan de manera un poco diferente. Si crea un formulario simple en React, funciona, pero es bueno agregar un código JavaScript a nuestro formulario para que pueda manejar el envío del formulario y recuperar los datos que ingresó el usuario. Para ello utilizamos componentes controlados.
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. Esto puede sonar complicado, pero entendamos con un ejemplo.

Primero, cree la aplicación de reacción y, desde el directorio de su proyecto, actualice su archivo index.js desde la carpeta src.

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
    
    onInputChange(event) {
        console.log(event.target.value);
    }
    
    render() {
        return (
            <div>
                <form>
                    <label>Enter text</label>
                    <input type="text"
                        onChange={this.onInputChange}/>
                </form>
            </div>
        );
    }
}
  
ReactDOM.render(<App />,
            document.querySelector('#root'));

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
    
    state = { inputValue: '' };
    
    render() {
        return (
        <div>
            <form>
                <label> Enter text </label>
                <input type="text"
                    value={this.state.inputValue}
                    onChange={(e) => this.setState(
                    { inputValue: e.target.value })}/>
            </form>
            <br/>
            <div>
                Entered Value: {this.state.inputValue}
            </div>
        </div>
        );
    }
}
  
ReactDOM.render(<App />,
            document.querySelector('#root'));

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
    
    state = { inputValue: '' };
  
    onFormSubmit = (event) => {
        event.preventDefault();
        this.setState({ inputValue: 'Hello World!'});
    }
    
    render() {
    
        return (
        <div>
            <form onSubmit={this.onFormSubmit}>
                <label> Enter text </label>
                <input type="text"
                value={this.state.inputValue}
                onChange={(e) => this.setState(
                { inputValue: e.target.value })}/>
            </form>
            <br/>
            <div>
                Entered Value: {this.state.inputValue}
            </div>
        </div>
        );
    }
}
  
ReactDOM.render(<App />,
        document.querySelector('#root'));