¿Cuáles son los tipos de datos que controlan un componente?

Un componente es uno de los componentes básicos de React. En otras palabras, un componente es una función de JavaScript que toma entradas (props) y devuelve un elemento React que representa cómo debería verse una sección de la interfaz de usuario.

Componentes controlados: los datos del formulario son manejados por el estado bajo el componente. El formulario tiene un formulario HTML predeterminado para navegar a la nueva página cuando el cliente/usuario envía el formulario. Si necesita una conducta similar en React, funciona. Sin embargo, como regla, es útil tener una función de JavaScript que maneje el alojamiento del formulario y se acerque a la información que el cliente/usuario envió al formulario. El método estándar para lograr esto es con un procedimiento llamado «componentes controlados».

Por qué usar componentes controlados: debe crear un controlador de eventos para cada forma en que su información puede cambiar y alinear la totalidad del estado de entrada a través de un componente React.

Los datos del formulario consisten en:

• entradas de texto
• entradas de números
• entradas de radio
• entradas de casilla de verificación
• áreas de texto
• selecciona

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando en la terminal/símbolo del sistema:

  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

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado (principal) donde hemos escrito nuestro código. 

import React, {Component}  from 'react';
  
class App extends React.Component {
  constructor(props) {
    super(props);
      
    this.onChange = this.onChange.bind(this);
      
    this.state = {
      name: ''
    };
  }
    
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
    
  render() {
    return (
      <div>
        <label for='name-input'>Message for GFG: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          value={this.state.name} />
      </div>
    )
  }
}
  
  
export default App;

El ejemplo anterior muestra cómo la propiedad de valor caracteriza el valor actual de la entrada y el controlador de eventos onChange actualiza el estado del componente con la información/entrada del cliente.

Salida: las entradas de formulario deben caracterizarse como componentes controlados cuando sea posible. Esto garantiza que el estado del componente y el valor de entrada estén en un estado de armonía consistentemente, independientemente de si el valor es cambiado por un activador que no sea una entrada del cliente.

Entrada de formulario

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado (principal) donde hemos escrito nuestro código. 

import React, { Component } from 'react';
  
class App extends Component {
    state = {
        message: ''
    }
    updateMessage = (newText) => {
        console.log(newText);
        this.setState(() => ({
            message: newText
        }));
    }
    render() {
        return (
            <div className="App">
                <div className="geeks">
                    <input type="text"
                        placeholder="Write something for gfg"
                        value={this.state.message}
                        onChange={(event) => this
                          .updateMessage(event.target.value)}
                    />
                    <p>Message for GFG: {this.state.message}</p>
                </div>
            </div>
        );
    }
}
  
export default App;

Salida: En este ejemplo, un componente representa un cuadro de texto en la página y repite lo que el cliente escriba en el cuadro de texto. Se crea un objeto de estado que contiene una propiedad conocida como mensaje . Aquí es donde se almacena el valor ingresado por el usuario en el cuadro de texto dado. Además, el controlador de eventos onChange se declara para controlar el componente.

componente controlado